react-step-range-slider
Use this component like a range input with dynamic steps. Fully responsive and supports touch.
Install
$ npm install react-step-range-slider --save
Example
Usage:
import StepRangeSlider from 'react-step-range-slider' const range = value: 0 step: 1 // acts as min value value: 20 step: 5 value: 50 step: 10 value: 100 step: 50 value: 500 // acts as max value <StepRangeSlider = = =/>
Props
range
: array
Configures min and max values as well as the step for each value breakpoint. Required.
value
: number
Determines the position of the drag handle. Should be divisible by the step at the appropriate value breakpoint.
defaultValue
: number
Determines initial position of the drag handle.
onChange
: function
Callback called on value change.
onChangeComplete
: function
Callback called on drag end or on click.
disabled
: bool
Prevent value change.
className
: string
Provide your own class for the outer element.
children
: any
Display whatever you want in the drag tooltip. Defaults to a tooltip.
Methods
stepDown()
Decrements the step of the slider by the specified number.
stepUp()
Increments the step of the slider by the specified number.