## Snap Slider (S—098)

A slider that snaps to labelled stops with tick marks; the thumb springs into each notch and the value label follows.

- URL: https://sundaeui.dev/components/snap-slider
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/snap-slider.json`
- Tags: steps, discrete, range, slider, snap, ticks

Drag freely, release and the thumb springs into the nearest stop. Each stop has a tick and a short label; the active label goes bold.
Good for discrete choices that still feel like a range: team size, speed, quality, plan tiers.

### Usage

```tsx
import { SnapSlider } from '@/components/sundae/snap-slider'

<SnapSlider />
```

### Props

- `stops` (`{ value: string; label: string }[]`, required): Stops in order.
- `value / defaultValue` (`string`): Selected stop.
- `onValueChange` (`(v: string) => void`): Called on change.
- `label` (`string`): Accessible name.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Picking from ordered, discrete options where position carries meaning.

### When not to use

- Continuous values: use a range slider.
- Unordered options: use radio cards.

### Accessibility

- A native-like slider: role="slider" with aria-valuetext set to the stop label.
- Arrow keys move one stop; Home/End jump to the ends.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Previous / next stop
- Home / End: First / last stop