# Shadcn Emoji Rating

> Rating slider with emoji feedback

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

## Best for

A 1 to 5 experience score that swaps a face emoji beside the track and a word such as Okay under it

## Agent notes

- `emojis` and `labels` are read at `value` minus 1, so keep each list as long as `max` while `min` stays 1

## When not to use

- A score shown as stars that people click, or as an average in a list: use [Rating](https://reui.io/components/rating.md) (`get_component("rating")`)

## Install

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

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