React component for inputting numeric values within a range, supports vertical sliders
npm install react-input-range-verticalreact-input-range Module (https://www.npmjs.com/package/react-input-range) by David Chin.
react-input-range-vertical using npm. npm install react-input-range-vertical
react-input-range to use InputRange component.
react-input-range.css if you want to apply the default styling.
babel-core/polyfill or core-js/es6 polyfill might be needed.
{js}
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 (
maxValue={20}
minValue={0}
value={this.state.values}
onChange={this.handleValuesChange.bind(this)}
/>
);
}
}
ReactDOM.render(
,
document.getElementById('app')
);
`
If accepting a single value, pass a number to value prop, i.e.:
`{js}
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.:
`{js}
maxValue={20}
minValue={0}
value={this.state.value}
onChange={this.handleValueChange.bind(this)}
orientation="vertical"
/>
`
$3
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
``