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 
  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.

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.