react-compound-slider

Welcome to the future. React Compound Slider is a tiny (5kb) slider component with no opinion about markup or styles.

Installation

React Compound Slider is available as an npm package.

To install and save in your package.json dependencies, run:

npm install react-compound-slider

Documentation

The documentation is divided into several sections:

Slider Features

Small size (5kb)
Makes no assumptions about your markup
Supports typescript
Precise control over user interactions and styling
Horizontal/vertical display
The display of values can be reversed
Supports mouse and touch events (tested in IE9+, Chrome, Firefox & Safari)
Create any type of slider (value, range, n-handled sliders)
Generates uniformly spaced, human-readable tick values to label your slider
Integrates seemlessly with any app styling approach (CSS, CSS-in-JS, Inline-styles)
Interaction modes (Allow crossing, Prevent crossing, Pushable mode, Create your own mode)
Works as a controlled component

Example Usage

import { Slider, Handles, Tracks } from 'react-compound-slider'
import { Handle, Track } from './your-local-slider-components'

  <Slider
    rootStyle={sliderStyle}
    domain={[0, 100]}  // [min, max]
    step={1}
    mode={2} // 1 = allow-crossing, 2 = no crossing, 3 = pushable (also custom modes)
    values={[10, 20, 30]} // one value would be a value slider, two a range slider, etc
  >
    <Handles>
        ...render your handles
    </Handles>
    <Tracks left={false} right={false}>  // you can toggle the left and right tracks
        ...render your tracks
    </Tracks>
  </Slider>

Approach

This library takes a compound component approach to creating sliders that separates the data/logic from presentation.

If your familiar with Kent Dodd's work on Paypal's downshift or react-toggled then the pattern should seem familiar. The components use the function as child components pattern.

In practical terms this means you can create just about any kind of slider you can imagine and use whatever style approach you want. By taking this approach it also frees you up to render whatever markup you want to customize your slider. The Slider streams you the data and really only cares about the dimensions of the outer div where it takes its measurements from.