# Slider
> Choose one value or a range along a bounded scale.
Source: https://www.honestui.com/docs/components/slider
```tsx
import { Slider } from "@/components/honest-ui/ui/slider"
export function SliderDemo() {
return
}
```
## Overview [#overview]
Use a Slider when people adjust a value on a bounded scale and seeing the range helps: volume, opacity, price bounds, thresholds, percentages. Dragging to an approximate position is faster than typing when precision matters less than direction — "a bit louder", "somewhere between $20 and $40".
When the exact number is the point, use Number Field instead, or pair it with a slider so each input style covers the other's weakness. A slider with no visible value hides the one thing keyboard users cannot verify, so show the number whenever it would be read.
## Anatomy [#anatomy]
A slider has a track, a filled indicator, thumbs, an optional value display, and the scale defined by `min`, `max`, and `step`. The thumb is a ridged pill (24 × 20 px in the default `size="large"`) that scales up and lifts while dragged or pressed; `size="small"` renders a slimmer round grip for dense layouts.
The component renders the track, indicator, and one thumb per value automatically — pass two values for a range slider and it renders two thumbs without extra markup. The root also sets `data-variant="range"` or `"single"`, which styling can target.
## Behavior [#behavior]
**Values and steps.** `min` defaults to 0 and `max` to 100; `step` defaults to 1 and supports decimals. Keyboard movement snaps to multiples of `step` measured from `min`, and Page Up/Page Down or Shift+arrows jump by `largeStep` (10 by default). Keep `(max − min)` divisible by `step` so the ends of the track are reachable exactly.
**Range sliders.** Two thumbs bound a range. `minStepsBetweenValues` keeps them apart by a minimum distance, and `thumbCollisionBehavior` decides what happens when they meet: `push` (default) shoves the neighbor, `swap` exchanges their places, `none` blocks the move.
**Commit timing.** `onValueChange` fires continuously while dragging; `onValueCommitted` fires on release. Do expensive work — network requests, filtering large lists — on commit, not on every intermediate value.
**Disabled.** `disabled` dims the whole control to half opacity and ignores pointer events. Disabled sliders keep their last value visible, so they suit locked settings better than hidden ones.
## Accessibility [#accessibility]
Each thumb renders a hidden native range input, so assistive technology announces it as a slider with its current value, minimum, maximum, and step. Focus lands directly on the active thumb, and the focus ring draws around the thumb visual only for keyboard focus.
Full keyboard support per thumb: Arrow keys step by `step` (Shift+Arrow steps by `largeStep`), Page Up/Page Down step by `largeStep`, and Home/End jump to the extremes (respecting the neighboring thumb's position in ranges). In vertical orientation Arrow Up increases; horizontal arrows also work in both orientations.
Name the slider through a connected `Label` and pair it with `SliderValue`, which renders the formatted numbers inside a semantic `