Component

Slider

A control for selecting a numeric value from a continuous range. The styled component is in development; the package currently ships the headless SliderProps contract, and the previews below use a native range input to illustrate the intended API.

Default

A controlled slider bound to React state.

Brightness40

Installation

$pnpm add @refraction-ui/react-slider

Usage

tsx

import { useState } from 'react'

export function BrightnessControl() {
  const [value, setValue] = useState(40)

  return (
    <input
      type="range"
      min={0}
      max={100}
      value={value}
      onChange={(e) => setValue(Number(e.target.value))}
      aria-label="Brightness"
      className="h-2 w-full appearance-none rounded-full bg-muted accent-primary"
    />
  )
}

Stepped range

Use step to snap the value to discrete increments.

Volume70%

Stepped in increments of 5 between 0 and 100.

Props

Prop	Type	Default	Description
`value`	`number`	--	The current value of the slider (controlled).
`min`	`number`	`0`	Minimum selectable value.
`max`	`number`	`100`	Maximum selectable value.
`step`	`number`	`1`	Granularity between selectable values.
`onChange`	`(value: number) => void`	--	Called with the new value as the user drags the thumb.