Slider

One or two native ranges with keyboard steps and bounded values.

All components · Theme builder · Implementation source

Live preview

Install

Shell

netscript ui:add slider

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { Slider } from '@app/components/ui/slider.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><Slider label="Discount" /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional
`SliderProps`	`label`	`string`	No
`SliderProps`	`labels`	`[object Object]`	Yes
`SliderProps`	`name`	`string`	Yes
`SliderProps`	`min`	`number`	Yes
`SliderProps`	`max`	`number`	Yes
`SliderProps`	`step`	`number`	Yes
`SliderProps`	`thumbs`	`1 \| 2`	Yes
`SliderProps`	`values`	`[object Object]`	Yes
`SliderProps`	`defaultValues`	`[object Object]`	Yes
`SliderProps`	`onValuesChange`	`(values: [object Object]) => void`	Yes
`SliderProps`	`orientation`	`"horizontal" \| "vertical"`	Yes
`SliderProps`	`state`	`"rest" \| "hover" \| "focus" \| "disabled"`	Yes
`SliderProps`	`disabled`	`boolean`	Yes
`SliderProps`	`value`	`boolean`	Yes
`SliderProps`	`class`	`string`	Yes

TypeScript

SliderProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "onChange">

Keyboard

Key	Action
`Arrow keys`	Increment or decrement
`Home/End`	Minimum or maximum

Tokens

Semantic contract roles: material/track, primary/default, surface/card.

CSS custom properties referenced directly: --ns-card, --ns-control-height, --ns-fg, --ns-font-data, --ns-muted, --ns-primary, --ns-radius-full, --ns-ring, --ns-space-1, --ns-space-10, --ns-space-2, --ns-space-4, --ns-text-small.

Contract and compatibility

Accessibility pattern: WAI-ARIA guidance

Native controls own keyboard/form behavior. Transient focus/hover is CSS/native; data-state also supports deliberate preview. Client visual/controlled updates require an island.
value is the design value-label visibility boolean; numeric positions use values/defaultValues. One/two native range inputs keep shared min/max geometry and clamp crossing requests.
Coincident upper-half thumbs put the lower native input on top; at the lower half the upper input stays on top, so pointer users can separate endpoint thumbs.

Design contract values marked planned are not implementation props. The props above describe what ships today.