@accessible/slider NPM

An accessible and versatile slider component for React. These components are touchable and keyboard navigable.

This library contains components for single-thumb sliders out of the box, though you could feasibly fashion a dual-thumb slider from what's here.

Quick Start

Check out the example on CodeSandbox

import {Slider, Track, Thumb} from '@accessible/slider'

const Component = () => (
  <Slider orientation="vertical">
    <div className="slider">
      <Track>
        <div className="track">
          <Thumb>
            <div className="thumb" />
          </Thumb>
        </div>
      </Track>
    </div>
  </Slider>
)

API

`<Slider>`

Creates the context for your slider and configures it. This also creates the underlying <input type='range'> component. Any props not listed below are provided to the <input>.

Props

Prop	Type	Default	Required?	Description
min	`number`	`0`	Yes	The minimum value of the slider
max	`number`	`100`	Yes	The maximum value of the slider
step	`number`	`1`	Yes	The amount the slider increases or decreases each time it is ticked
value	`number`	`undefined`	No	Makes this component controlled. This is always the value of the slider. `incr`, `decr`, `set` and keyboard steps have no effect.
defaultValue	`number`	`50`	No	Sets the default value of the slider
orientation	"horizontal" \| "vertical"	`"horizontal"`	Yes	Sets the orientation of the slider. When `horizontal` the minimum value is on the left, max on the right. When `vertical`, the minimum value is on the bottom and the max is on the top.
disabled	`boolean`	`false`	No	Disables the slider `incr`, `decr`, `set`, and keyboard controls. You can still update the slider's value using the `value` prop.
onChange	`(value?: number) => any`	`undefined`	No	Called each time the `value` changes.

`<Track>`

This component attaches event handlers to its child that make it act like a native <input type="range"> track. It is your responsibility to style it.

Props

Prop	Type	Default	Required?	Description
children	`React.ReactElement`	`undefined`	Yes	Provides events to its child component that control the state of the slider's value depending on the current drag/click position.

`<Thumb>`

This component adds styles to its child that update the child's position within a track based upon the progress of the slider i.e. (value - min) / (max - min).

Props

Prop	Type	Default	Required?	Description
children	`React.ReactElement`	`undefined`	Yes	The child component you want to add progress styles to.

`useSlider()`

A hook that provides the slider's SliderContext

`SliderContextValue`

interface SliderContextValue {
  incr: (by?: number) => void
  decr: (by?: number) => void
  set: (value: number) => void
  value: number
  min: number
  max: number
  step: number
  focused: boolean
  disabled: boolean
  orientation: 'horizontal' | 'vertical'
  inputRef: React.MutableRefObject<HTMLInputElement | null>
}