# Shadcn Value Tooltip

> Slider with dynamic tooltip indicator

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

## Best for

A volume level whose percent rides above the thumb in a filled bubble with a small arrow, moving as it drags

## Agent notes

- Change the local `min` and `max` constants, not the `Slider` props alone, since the bubble's `percentage` reads them too

## When not to use

- A short hint shown on hover or focus beside a button or an icon: use [Tooltip](https://reui.io/components/tooltip.md) (`get_component("tooltip")`)

## Install

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

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