npm i @accessible/slider

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.

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>
)

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>.

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.

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).

A hook that provides the slider's SliderContext

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>
}

A hook that returns the slider's current value

A hook that returns the value of (value - min) / (max - min)

A hook that returns the slider's current orientation

A hook that returns true if the slider is focused

A hook that returns true if the slider is disabled

A hook that provide's the slider's incr, decr, and set functions

MIT