react-step-range-slider

react-step-range-slider

Use this component like a range input. Supports dynamic steps. Fully responsive.

Example

Usage:

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 
  value={5} 
  range={range} 
  onChange={value => console.log(value)}
/>

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.

children : any

Display whatever you want in the drag tooltip. Defaults to a tooltip.

Methods

stepDown() : number

Decrements the step of the slider by the specified number.

stepUp() : number

Increments the step of the slider by the specified number.