# Slider

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

[All components](https://rickylabs.github.io/netscript/design-system/components/) · [Theme builder](https://rickylabs.github.io/netscript/create/) · [Implementation source](https://github.com/rickylabs/netscript/blob/main/packages/fresh-ui/registry/components/ui/slider.tsx)

## Live preview

[Open live slider preview](https://rickylabs.github.io/netscript/assets/fresh-ui/preview/?component=slider&theme=studio-utility)

## Install

```bash
netscript ui:add slider
```

## Usage and examples

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

```tsx
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 | Description |
| --- | --- | --- | --- | --- |
| `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](https://www.w3.org/WAI/ARIA/apg/patterns/slider/)

- 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.