Angle Slider
An interactive circular slider for selecting angles with support for single values and ranges.
Installation
pnpm dlx shadcn@latest add @diceui/angle-sliderLayout
Import the parts and compose them together.
import {
AngleSlider,
AngleSliderRange,
AngleSliderThumb,
AngleSliderTrack,
AngleSliderValue,
} from "@/components/ui/angle-slider";
return (
<AngleSlider>
<AngleSliderTrack>
<AngleSliderRange />
</AngleSliderTrack>
<AngleSliderThumb />
<AngleSliderValue />
</AngleSlider>
)Examples
Controlled State
A slider with controlled state management and custom actions.
Range Selection
Use multiple thumbs to create angle ranges with minimum step constraints.
Themes
Slider variants with different themes.
With Form
Integrate the angle slider with form validation and submission.
Theming
You can customize the appearance by targeting specific components:
Track Theming
Use [&>[data-slot='angle-slider-track-rail']] to style the background track:
<AngleSliderTrack className="*:data-[slot='angle-slider-track-rail']:stroke-green-100" />Range Theming
<AngleSliderRange className="stroke-green-500" />Thumb Theming
<AngleSliderThumb className="border-green-500 bg-green-50 ring-green-500/50" />Value Theming
<AngleSliderValue className="text-green-600 dark:text-green-400" />API Reference
AngleSlider
The main container component for the angle slider.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when the angle slider is disabled. |
AngleSliderTrack
The circular track that represents the full range of possible values.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when the angle slider is disabled. |
[data-slot='angle-slider-track-rail'] | Present on the rail of the track. |
AngleSliderRange
The portion of the track that represents the selected range.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when the angle slider is disabled. |
AngleSliderThumb
The draggable handle for selecting values.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when the angle slider is disabled. |
AngleSliderValue
Displays the current value(s) with customizable formatting.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when the angle slider is disabled. |
Accessibility
The angle slider component includes comprehensive accessibility features:
Keyboard Interactions
| Key | Description |
|---|---|
| ArrowUpArrowRight | Increase the value by one step. |
| ArrowDownArrowLeft | Decrease the value by one step. |
| PageUp | Increase the value by ten steps. |
| PageDown | Decrease the value by ten steps. |
| Shift + Arrow Keys | Increase/decrease the value by ten steps. |
| Home | Set the value to the minimum. |
| End | Set the value to the maximum. |
Features
- Optimized for touch interactions on mobile devices
- Smooth dragging experience with proper pointer handling
- Full right-to-left language support
- Comprehensive keyboard navigation and screen reader support
- Angle ranges with minimum step constraints with multiple thumbs
- Controlled and uncontrolled state management