## Timezone Slider (S—123)

Drag one time across a day and see it in every team member’s timezone, with working hours shaded on each track.

- URL: https://sundaeui.dev/components/timezone-slider
- Category: UI components · 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/timezone-slider.json`
- Tags: timezone, meeting, team, scheduler, world-clock, slider

Each row is a 24-hour track for one city with its working hours marked. A single vertical cursor sweeps all rows at once, and every row shows its local time at that moment.
Rows outside working hours dim, so finding a slot that suits everyone is a matter of sliding until all rows are lit.

### Usage

```tsx
import { TimezoneSlider } from '@/components/sundae/timezone-slider'

<TimezoneSlider />
```

### Props

- `zones` (`{ label: string; tz: string; start?: number; end?: number }[]`, required): IANA zones and working hours (24h).
- `onChange` (`(utc: Date) => void`): Called with the chosen instant.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Scheduling across distributed teams, event times for global audiences.

### When not to use

- A single-timezone product.

### Accessibility

- A slider with aria-valuetext listing every local time.
- Arrow keys step 15 minutes; Page Up/Down step an hour.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: ±15 minutes
- Page Up / Down: ±1 hour