# Glass slider (goodtabs UI)

A slider on a pane of glass with a bold thumb, single or range.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/glass-slider.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/glass-slider`

## Usage

```tsx
import { GlassSlider } from "@/components/ui/glass-slider"

<GlassSlider aria-label="Volume" defaultValue={[40]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| aria-label | `string` |  | Required name. It is applied to each thumb, with minimum and maximum added for a range. |
| value, defaultValue, onValueChange | `radix Slider props` |  | Controlled or uncontrolled. One value gives one thumb, two give a range. |
| min, max, step | `number` | `0, 100, 1` | The scale, as on the shadcn slider. |

## When to use

- Over an image or a gradient, such as a player, an editor overlay or a camera view
- A single value or a range where the position matters more than the number

## When not to use

- On a flat page background, where there is nothing to refract: use the plain slider
- For values that need exact entry, since a slider is coarse

## Notes for agents

- The pane is 36px tall and the thumb 20px, so the thumb keeps 8px above and below. Radix handles pointer, touch and keys
- The name is copied onto the thumbs in an effect because the shadcn slider does not forward it
- Without Chromium the pane is frosted instead of refracted, and under reduced transparency it is solid

Docs: https://ui.goodtabs.co/components/glass-slider