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

useValue()

A hook that returns the slider's current value

useProgress()

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

useOrientation()

A hook that returns the slider's current orientation

useFocused()

A hook that returns true if the slider is focused

useDisabled()

A hook that returns true if the slider is disabled

useControls()

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

LICENSE

MIT