# Shadcn Reference Labels

> Slider with reference labels

- Type: example, free and open source (MIT)
- Component: [Slider](https://reui.io/components/slider.md)
- Page: https://reui.io/components/slider/c-slider-9
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/slider.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/slider.md
- MCP: `get_example("c-slider-9")`
- Registry item: https://reui.io/r/styles/base-nova/c-slider-9.json
- Uses: Label, Slider

## Best for

A 5 to 35 GB storage pick with its low, middle and high marks printed under the track

## Agent notes

- The 5 GB, 20 GB and 35 GB marks are fixed text hidden from screen readers; rewrite them whenever `min` or `max` changes

## When not to use

- A scale that needs a mark at every step, not just its ends and middle: use [Tick Marks](https://reui.io/components/slider/c-slider-10.md) (`get_example("c-slider-10")`)

## Install

```bash
npx shadcn@latest add @reui/c-slider-9
```

## About Shadcn Slider

### When to use

- Settings tuned by dragging along a bounded scale, such as volume, opacity or color temperature
- Ranges picked with 2 or more thumbs on a single track, laid out horizontally or vertically
- Durations, storage sizes and scores read off tick marks, scale labels, a value bubble or an emoji

### When not to use

- A complete shop facet panel with brands, colors, sizes and a price range: use the [Filter Sidebar blocks](https://reui.io/blocks/ecommerce/filter-sidebar.md)
- A value typed straight into a box, such as an exact price, with no scale to drag: use [Input](https://reui.io/components/input.md) (`get_component("input")`)
- A read only bar that reports how far a task or upload has got: use [Progress](https://reui.io/components/progress.md) (`get_component("progress")`)

### Agent notes

- The base `Slider` draws a thumb per entry of an array `value` or `defaultValue`; a plain number gets 2 stacked thumbs and 2 tab stops
- `htmlFor` on a `Label` reaches only the root div of the base `Slider`, not its thumb input; name the slider with aria-labelledby instead
- Base `onValueChange` is typed as a number or a read only array, so narrow it with `Array.isArray`; the radix twin passes a number array

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.