# Slider
Adjust a number or a range with draggable thumbs and keyboard controls.
Use a slider to pick a number or a range along a scale, like a volume or a price range, by dragging a thumb or with the arrow keys.
## Installation
```bash
npm install @ui-sdk/solid @ui-sdk/core
```
## Composition
Use the following composition to build a `Slider`:
```text
Slider
├── SliderValue
└── SliderControl
└── SliderTrack
├── SliderIndicator
└── SliderThumb
```
A control handles presses around the track. Put a thumb on that track for each value.
- **Slider** holds the value and is a group around the thumbs.
- **SliderControl** is where presses land. Pressing it moves the nearest thumb and starts a drag. Give it some height around a thin track.
- **SliderTrack** is the rail the thumbs move along. Thumbs and the indicator are placed in percentages of it with inline styles, so give it a size. It's the positioned box.
- **SliderIndicator** fills the track up to a single thumb, or between the first and last thumb of a range.
- **SliderThumb** is what you drag. Give each one a size.
- **SliderValue** shows the formatted value, and a range joined with an en dash. It's optional.
Each thumb renders a visually hidden `` inside itself. That input is what takes focus, so
screen readers on phones adjust it with their own gestures. Style focus on the thumb with `:has(:focus-visible)`.
The slider also renders a hidden input that the form submits.
A single thumb is named by a `FieldLabel` in a `Field`, or by `aria-label` on the thumb. In a range, give
each thumb its own `aria-label`, like "Minimum price", and name the group with a `FieldLabel` or
`aria-label` on the slider.
## Usage
Import the parts and put them together:
```tsx
import {
Slider,
SliderValue,
SliderControl,
SliderTrack,
SliderIndicator,
SliderThumb,
} from "@ui-sdk/solid/slider"
function VolumeSlider() {
return (
)
}
export { VolumeSlider }
```
## Range
Pass an array for a range, then render one thumb per number. Give each thumb its `index`, from 0, and its own name, like "Minimum price". The indicator fills the space between the first and the last thumb, and the `FieldLabel` names the group.
```tsx title="range.tsx"
import { Field, FieldLabel } from "@ui-sdk/solid/field"
import {
Slider,
SliderControl,
SliderIndicator,
SliderThumb,
SliderTrack,
SliderValue,
} from "@ui-sdk/solid/slider"
function Example() {
return (
Price
)
}
export { Example }
```
Move either end of Price. The thumbs stay in order.
## Multiple Thumbs
Any number of thumbs works the same way. They never pass each other, and a press on the track moves the nearest one.
```tsx title="multiple.tsx"
import { Field, FieldLabel } from "@ui-sdk/solid/field"
import {
Slider,
SliderControl,
SliderIndicator,
SliderThumb,
SliderTrack,
SliderValue,
} from "@ui-sdk/solid/slider"
import { For } from "solid-js"
const thumbs = ["Low", "Medium", "High"]
function Example() {
return (
Alert thresholds
{(label, index) => (
)}
)
}
export { Example }
```
Adjust Low, Medium and High independently, without moving one past another.
## Vertical
Set `orientation="vertical"` and give the slider a height. The bottom is the minimum, ArrowUp increases the value, and every part gets `data-orientation`, so `[data-orientation="vertical"]` styles the vertical axis.
```tsx title="vertical.tsx"
import { Field, FieldLabel } from "@ui-sdk/solid/field"
import {
Slider,
SliderControl,
SliderIndicator,
SliderThumb,
SliderTrack,
} from "@ui-sdk/solid/slider"
import { For } from "solid-js"
const channels = [
{ label: "Bass", value: 50 },
{ label: "Treble", value: 25 },
]
function Example() {
return (
{(channel) => (
{channel.label}
)}
)
}
export { Example }
```
Drag up or down, or use the arrow keys, to adjust Bass and Treble.
## Field
Put the slider in a `Field`. The label names the thumb, the description describes it, and `SliderValue` shows the value beside the label. Screen readers don't announce `SliderValue` as it changes, since the thumb already says its value.
```tsx title="field.tsx"
import { Field, FieldDescription, FieldLabel } from "@ui-sdk/solid/field"
import {
Slider,
SliderControl,
SliderIndicator,
SliderThumb,
SliderTrack,
SliderValue,
} from "@ui-sdk/solid/slider"
function Example() {
return (
Volume
How loud notifications play.
)
}
export { Example }
```
Click the Volume label to focus the thumb, then use the arrow keys to change the value.
## Disabled
Set `disabled`. A disabled slider can't be focused or moved, and isn't submitted. A disabled `