React Rangeslider Extended
A lightweight responsive react range slider component forked from whoisandie/react-rangeslider.
Install
Install via npm
(use --save
to include it in your package.json)
$ npm install react-rangeslider-extended-multiple --save
Usage
React Rangeslider is bundled with a single slider component. You can require them in plain old ES5 syntax or import them in ES6 syntax.
...plain old ES5
var React = ;var Slider = ; var Volume = React; moduleexports = Volume;
... or use ES6 syntax
;; extends Component { superprops context; thisstate = value: 10 /** Start value **/ ; } { this; } { return <Slider value=value orientation="vertical" onChange=thishandleChange /> ; }
There's also a umd version available at lib/umd
. The component is available on window.ReactRangeslider
. To style the slider, please refer the rangeslider styles in demo/demo.less
file.
API
Rangeslider is bundled with a single component, that accepts data and callbacks only as props
.
Component
// inside render<Slider min=String or Number max=String or Number step=String or Number orientation=String value=Number onChange=Function onChangeComplete=Function valueMapping=Function />
Props
Prop | Default | Description |
---|---|---|
min |
0 | minimum value the slider can hold |
max |
100 | maximum value the slider can hold |
step |
1 | step in which increments/decrements have to be made |
orientation |
horizontal | orientation of the slider |
value |
- | current value of the slider |
onChange |
- | function the slider takes, current value of the slider as the first parameter |
onChangeComplete |
- | function the slider takes and fires after interaction has ended, current value of the slider as the first parameter |
valueMapping |
default func | function returning an object that defines segments and toValue and toPos methods to controll position to value (and vice versa) mapping |
Issues
Feel free to contribute. Submit a Pull Request or open an issue for further discussion.
License
MIT © whoisandie & Oliver Wehn