React Rangeslider with Markers
This is a fork from https://github.com/whoisandie/react-rangeslider. Added custom min max markers on the slider.
Check out examples.
Install
Install via npm
(use --save
to include it in your package.json)
$ npm install react-rangeslider-withmarker --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
.
API
Rangeslider is bundled with a single component, that accepts data and callbacks only as props
.
Component
var Slider = ; // inside render<Slider min=String or Number max=String or Number step=String or Number orientation=String value=Number onChange=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 |
Issues
Feel free to contribute. Submit a Pull Request or open an issue for further discussion.
License
MIT © whoisandie