Slider v0.1.0 Forms

Single-value slider on a native range input: browser-grade keyboard, touch, and a11y.

import { Slider } from "latticeui-react";

Examples

Basic

Volume40%

Show code

<Slider label="Volume" defaultValue={40} formatValue={(v) => `${v}%`} />

Custom range and step

Price limit$200

Show code

<Slider
  label="Price limit"
  min={50}
  max={500}
  step={25}
  defaultValue={200}
  formatValue={(v) => `$${v}`}
/>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div`	`[data-scope="slider"][data-part="root"]`
`label`	`label`	`[data-scope="slider"][data-part="label"]`
`valueText`	`span`	`[data-scope="slider"][data-part="valueText"]`
`control`	`input[type=range]`	`[data-scope="slider"][data-part="control"]`

Props

Prop	Type	Default
`label` *	`string`	—
`value / defaultValue`	`number`	—
`onValueChange`	`(value: number) => void`	—
`min / max / step`	`number`	`0 / 100 / 1`
`formatValue`	`(value: number) => string`	—

Accessibility

Roles: slider (native)

Key	Action
`Arrow keys`	step
`Home/End`	min/max

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="slider"][data-part="control"] {
  /* your overrides */
}