# Shadcn Range

> Slider with range selection

- Type: example, free and open source (MIT)
- Component: [Slider](https://reui.io/components/slider.md)
- Page: https://reui.io/components/slider/c-slider-6
- 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-6")`
- Registry item: https://reui.io/r/styles/base-nova/c-slider-6.json
- Uses: Slider

## Best for

The plain 2 thumb span: ends at 25 and 75 on a 0 to 100 track that move in steps of 5, with no state

## When not to use

- A span whose chosen ends must show as numbers while dragging: use [Controlled Value](https://reui.io/components/slider/c-slider-5.md) (`get_example("c-slider-5")`)

## Install

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

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