Form

Slider

Single-thumb slider with pointer drag, track click, tick marks, vertical orientation and full keyboard support.

Import

import { Slider } from "@zephora/react";

Examples

Basic

`showValue` renders the current value next to the track.

<Slider defaultValue={40} showValue aria-label="Volume" />

Steps and marks

050100

<Slider
  min={0}
  max={100}
  step={25}
  defaultValue={50}
  aria-label="Quality"
  marks={[
    { value: 0, label: "0" },
    { value: 25 },
    { value: 50, label: "50" },
    { value: 75 },
    { value: 100, label: "100" },
  ]}
/>

Controlled

Brightness: 30%

const [value, setValue] = React.useState(30);

<Slider value={value} onValueChange={setValue} aria-label="Brightness" />
<p>Brightness: {value}%</p>

Range

`range` renders two thumbs; `tooltip` shows a value bubble while a thumb is dragged or focused, and `onValueCommit` fires once at the end of a change series.

20 – 60

const [range, setRange] = React.useState<[number, number]>([20, 60]);

<Slider
  range
  rangeValue={range}
  onRangeChange={setRange}
  onValueCommit={(value) => console.log("committed", value)}
  tooltip
  aria-label="Price range"
/>
<p>{range[0]} – {range[1]}</p>

API

Slider props

Prop	Type	Default	Description
`value`	`number`	—	Controlled value.
`defaultValue`	`number`	`min`	Initial value in uncontrolled mode.
`onValueChange`	`(value: number) => void`	—	Called with the new value on every change.
`range`	`boolean`	`false`	Two-thumb range mode. Use rangeValue / defaultRangeValue / onRangeChange.
`rangeValue`	`[number, number]`	—	Controlled [low, high] pair (range mode).
`defaultRangeValue`	`[number, number]`	`[min, max]`	Initial [low, high] pair in uncontrolled range mode.
`onRangeChange`	`(value: [number, number]) => void`	—	Called with the new [low, high] pair on every change (range mode).
`onValueCommit`	`(value: number \| [number, number]) => void`	—	Called once at the end of a change series (pointer release / key release) with the final value.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number \| null`	`1`	Snap increment. Pass null to snap exclusively to marks values (arrow keys then move between marks).
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Track direction.
`marks`	`SliderMark[]`	—	Tick marks rendered along the track: { value, label? }.
`showValue`	`boolean`	`false`	Shows the current value next to the track.
`tooltip`	`boolean \| "always"`	`false`	Shows a value bubble above a thumb while dragged or focused; "always" keeps it visible.
`disabled`	`boolean`	`false`	Disables interaction.
`aria-label / aria-labelledby`	`string`	—	Accessible name for the thumb (role="slider").
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so your own CSS can style it.
`…rest`	`HTMLAttributes<HTMLDivElement>`	—	Forwarded to the root wrapper element.

Keyboard

Key	Action
`Arrow Right / Arrow Up`	Increases the value by step.
`Arrow Left / Arrow Down`	Decreases the value by step.
`Page Up / Page Down`	Changes the value by 10 × step.
`Home / End`	Jumps to min / max.