Clean and simple Slider component. For when <input type="range" /> just won't do (IE9).
This component is designed for use with Browserify (but should work with anything CommonJS compatible). You can easily install it with npm:
npm install @meadow/react-slider
Meadow Slider is a drop-in replacement for <input type="range" /> with a couple extras here and there. Basic usage looks something like this:
varSlider=require('@meadow/react-slider');varApp=React.createClass({render: function(){return(<div><Slidermin={5}max={150}/></div>)}})In order for this component to work, you must also include some styles. The easiest way to do so is by including the compiled CSS directly from this module:
import'node_modules/@meadow/react-slider/lib/styles/Slider.css';| Property | Type | Description |
|---|---|---|
| min | Number | The minimum value of the slider. |
| max | Number | The maximum value of the slider. |
| step | Number | If set, this splits the slider into a set of steps that are step apart. |
| value | Number | The value of the slider. If set, the slider will be a controlled component. You will need to set the onChange handler and update value manually. |
| defaultValue | Number | The intial value of the slider. If set, the slider will be an uncontrolled component. |
| onChange | Function | Callback to be fired when the value of the slider changes. Takes a single argument, newValue. |
| className | String | The CSS classes to be applied to the base slider element. |