Skip to content
◾️ React Compound Slider | A tiny (4kb) React slider
Branch: master
Clone or download
Latest commit 1949a3e Jul 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs update docs deps Jun 29, 2019
scripts no coveralls Jan 23, 2019
src export more types Jul 11, 2019
test use spec reporter Jan 23, 2019
.eslintrc.js linst fixes Jan 16, 2019
.gitignore ignore coverage output Sep 6, 2017
.size-snapshot.json update snapshot Jun 29, 2019
.travis.yml travis yml Sep 6, 2017
CONTRIBUTING.md add contributing file Dec 13, 2017
ISSUE_TEMPLATE.md add issue template Dec 13, 2017
LICENSE add license file Sep 7, 2017
README.md Update README.md May 29, 2019
babel.config.js updates to build Jan 16, 2019
package-lock.json bump version Jul 11, 2019
package.json bump version Jul 11, 2019
rollup.config.js update rollup Jan 15, 2019

README.md

React Compound Slider

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

Documentation and Examples

Build Status Coverage Status license npm downloads gzip size npm version Language grade: JavaScript

Motivation

This library aims to be a stable platform for creating slider components with a very small impact on bundle size. It is primarily aimed at application developers and npm package maintainers. You can create your own set of controls matched exactly to your application style, but it takes a little more effort than other components out there. You need to be comfortable handling what gets rendered and styling your components to really get maximum value from this library. There are quite a few demos on the website but they should be used as a starting point. You can also create your own custom themed slider component for your favorite framework and release it on npm for others to use.

Slider Features

  • Small size (4.3kb)
  • Makes no assumptions about your markup
  • Supports SVG sliders
  • 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)
  • Supports keyboard events so handles can be moved using arrow keys
  • 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

Documentation and Examples

More Examples on CodeSandbox

Installation

React Compound Slider is available as an npm package.

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

// React 16.3 or greater
npm install react-compound-slider

// React 15.0 -> 16.2
npm install react-compound-slider@0.16.3

Documentation

The documentation is divided into several sections:

Example Usage

You have full control of everything that is rendered. Just render the Slider children that you want. Don't need ticks? Don't use Ticks. Don't want a rail? Don't use Rail. Just create the local rail, handle, track and tick components that you want and render those using whatever styling method you prefer.

You can use these components from the demos to jumpstart your slider:

Starter Components - Horizontal

Starter Components - Vertical

Starter Components - Material UI

Starter Components - With Tooltips

Basic Tooltip CSS (CSS from this demo)

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

  <Slider
    rootStyle={sliderStyle}
    domain={[0, 100]} // [min, max]
    values={[20, 60, 80]} // slider values
  >
    <Rail>
      {({ getRailProps }) => (
        <div style={railStyle} {...getRailProps()} /> // render your clickable rail!
      )}
    </Rail>
    <Handles>
      {({ handles, getHandleProps }) => (
        // render your handles!
      )}
    </Handles>
    <Tracks left={false} right={false}>
      {({ tracks, getTrackProps }) => (
        // render your (optional) tracks!
      )}
    </Tracks>
    <Ticks count={10}> 
      {({ ticks }) => (
        // render your (optional) ticks!
        // count prop = auto generate approximately 10 uniformly spaced, human-readable ticks
      )}
    </Ticks>
  </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.

In general slider components are composed of a relatively positioned outer div with elements absolutely positioned inside by a percentage. In this library the Handles, Tracks, and Ticks components are used as children to the Slider component and they let you tap into a stream of values and percentages that you can then use to render your own components.

Slider Artwork by Guilhem from the Noun Project

You can’t perform that action at this time.