Slider
ExperimentalAdjust a numeric value or range with named thumbs.
Example
Preferred range
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Slider } from 'panel-ui-kit/slider'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Slider defaultValue={[25, 75]} thumbLabels={["Minimum", "Maximum"]} min={0} max={100} step={5} /> </PanelUiTheme> );}When to use
Use when approximate numeric adjustment is useful. Prefer exact text entry when precision matters.
Keyboard
Arrow keys step, Home/End reach bounds, Page Up/Down make larger changes. RTL and orientation follow Radix.
Properties
| Property | Values | Default |
|---|---|---|
thumbLabels | One nonempty label per value | Required |
value / defaultValue | number[] | [0] |
min / max / step | number | 0 / 100 / 1 |
motion | full · reduced · off · object | Inherited |