react-multi-thumb-slider

This package provides you general non-overlapping multi thumb range slider.

> Warning: beta quality software!
> use at your own risk

$3

``shell script
npm install --save react-multi-thumb-slider
`

or

`shell script
yarn add react-multi-thumb-slider
`




$3

#### General slider
`javascript
import { Slider } from 'react-multi-thumb-slider';
`

#### Material slider preset
`javascript
import { MaterialSlider } from 'react-multi-thumb-slider';
`

$3

#### Material slider preset

!Material slider preset

`jsx



`

#### Custom slider

!Custom slider


`jsx
min={1}
max={10}
onChange={setValues}
values={values}
styleThumb={{background: '#333', height: '20px', width: '20px'}}
styleTrack={{background: 'lightblue', borderRadius: '2px', height: '10px', marginTop: '5px'}}
styleWrap={{height: '20px', width: '300px'}}
rangeBackground="grey"
/>
``

$3

- values aren't sorted

$3

- implement thumb labels
- docs
- tests
- more presets

$3

- https://css-tricks.com/multi-thumb-sliders-general-case.