react-input-range-vertical

react-input-range

This Module is based on the react-input-range Module (https://www.npmjs.com/package/react-input-range) by David Chin.

I just added the vertical option. Otherwise see the original for usage.

Installation

1. Install react-input-range-vertical using npm. npm install react-input-range-vertical
2. Import react-input-range to use InputRange component.
3. Optionally, import react-input-range.css if you want to apply the default styling.
4. Depending on your browser support requirement, babel-core/polyfill or core-js/es6 polyfill might be needed.

Usage

If accepting a range of values:

import React from 'react';
import ReactDOM from 'react-dom';
import InputRange from 'react-input-range';
 
class App extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = {
      values: {
        min: 2,
        max: 10,
      },
    };
  }
 
  handleValuesChange(component, values) {
    this.setState({
      values: values,
    });
  }
 
  render() {
    return (
      <InputRange
        maxValue={20}
        minValue={0}
        value={this.state.values}
        onChange={this.handleValuesChange.bind(this)}
      />
    );
  }
}
 
ReactDOM.render(
  <App />,
  document.getElementById('app')
);

If accepting a single value, pass a number to value prop, i.e.:

<InputRange
  maxValue={20}
  minValue={0}
  value={this.state.value}
  onChange={this.handleValueChange.bind(this)}
/>

For a vertical slider just pass the string "vertical" to the orientation prop, i.e.:

<InputRange
  maxValue={20}
  minValue={0}
  value={this.state.value}
  onChange={this.handleValueChange.bind(this)}
  orientation="vertical"
/>

Options

Property	Type	Description
ariaLabelledby	string	aria-labelledby attribute
ariaControls	string	aria-controls attribute
classNames	Object.<string>	CSS class names
defaultValue	number | Object.<number>	Default value(s)
disabled	boolean	Disabled or not
formatLabel	Function	Label formatter
labelPrefix	string	Label prefix
labelSuffix	string	Label suffix
maxValue	number	Maximum value it can accept
minValue	number	Minimum value it can accept
name	string	Name of form input
onChange	Function	onChange callback (required)
onChangeComplete	Function	onChangeComplete callback
step	number	Increment/decrement value
value	number | Object.<number>	Current value(s) (required)
orientation	string	Wether the slider is horizontal or vertical

Development

If you want to work on this project locally, you need to grab all of its dependencies.

npm install && bundle install

After that, you should be able run

npm start