React Compound Slider Component

Description:

The React Compound Slider enables you to create customizable value and range slider controls for your app.

Installation:

# NPM
$ npm install react-compound-slider --save

Usage:

import Slider, { Rail, Handles, Tracks, Ticks } from 'react-compound-slider'
<Slider
  rootStyle={sliderStyle}
  domain={[0, 100]}
  step={1}
  mode={2}
  reversed // just change the reversed prop
  defaultValues={[20, 60, 80]}
>
  <Rail>
    {({ getRailProps }) => (
      <div style={railStyle} {...getRailProps()} />
    )}
  </Rail>
  <Handles>
    {({ handles, getHandleProps }) => (
      <div className="slider-handles">
        {handles.map(handle => (
          <Handle
            key={handle.id}
            handle={handle}
            getHandleProps={getHandleProps}
          />
        ))}
      </div>
    )}
  </Handles>
  <Tracks left={false} right={false}>
    {({ tracks, getTrackProps }) => (
      <div className="slider-tracks">
        {tracks.map(({ id, source, target }) => (
          <Track
            key={id}
            source={source}
            target={target}
            getTrackProps={getTrackProps}
          />
        ))}
      </div>
    )}
  </Tracks>
  <Ticks values={[0, 25, 50, 75, 100]}>
    {({ ticks }) => (
      <div className="slider-ticks">
        {ticks.map(tick => (
          <Tick key={tick.id} tick={tick} count={ticks.length} />
        ))}
      </div>
    )}
  </Ticks>
</Slider>

Preview: