react-step-range-slider

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

!react-step-range-slider

Usage:

``jsx
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
]

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.