║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Angle Slider description: An interactive circular slider for selecting angles with support for single values and ranges. preview: true links: api: /docs/components/angle-slider#api-reference

<ComponentTabs name="angle-slider-demo" />

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/angle-slider"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @radix-ui/react-slot
 ```

</Step> <Step> Copy the refs composition utilities into your `lib/compose-refs.ts` file.

<ComponentSource name="compose-refs" />

</Step> <Step> Copy the visually hidden input component into your `components/visually-hidden-input.tsx` file.

<ComponentSource name="visually-hidden-input" />

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource name="angle-slider" />

</Step> </Steps>

Layout

Import the parts and compose them together.

import {
  AngleSlider,
  AngleSliderRange,
  AngleSliderThumb,
  AngleSliderTrack,
  AngleSliderValue,
} from "@/components/ui/angle-slider";

<AngleSlider>
  <AngleSliderTrack>
    <AngleSliderRange />
  </AngleSliderTrack>
  <AngleSliderThumb />
  <AngleSliderValue />
</AngleSlider>

Examples

Controlled State

A slider with controlled state management and custom actions.

<ComponentTabs name="angle-slider-controlled-demo" />

Range Selection

Use multiple thumbs to create angle ranges with minimum step constraints.

<ComponentTabs name="angle-slider-range-demo" />

Themes

Slider variants with different themes.

<ComponentTabs name="angle-slider-themes-demo" />

With Form

Integrate the angle slider with form validation and submission.

<ComponentTabs name="angle-slider-form-demo" />

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

Root

The main container component for the angle slider.

<AutoTypeTable path="./types/docs/angle-slider.ts" name="RootProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the angle slider is disabled.", }, ]} />

Track

The circular track that represents the full range of possible values.

<AutoTypeTable path="./types/docs/angle-slider.ts" name="TrackProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the angle slider is disabled.", }, { title: "[data-slot='angle-slider-track-rail']", value: "Present on the rail of the track.", }, ]} />

Range

The portion of the track that represents the selected range.

<AutoTypeTable path="./types/docs/angle-slider.ts" name="RangeProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the angle slider is disabled.", }, ]} />

Thumb

The draggable handle for selecting values.

<AutoTypeTable path="./types/docs/angle-slider.ts" name="ThumbProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the angle slider is disabled.", }, ]} />

Value

Displays the current value(s) with customizable formatting.

<AutoTypeTable path="./types/docs/angle-slider.ts" name="ValueProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when the angle slider is disabled.", }, ]} />

Accessibility

The angle slider component includes comprehensive accessibility features:

Keyboard Interactions

<KeyboardShortcutsTable shortcuts={[ { keys: ["ArrowUp", "ArrowRight"], description: "Increase the value by one step.", }, { keys: ["ArrowDown", "ArrowLeft"], description: "Decrease the value by one step.", }, { keys: ["PageUp"], description: "Increase the value by ten steps.", }, { keys: ["PageDown"], description: "Decrease the value by ten steps.", }, { keys: ["Shift + Arrow Keys"], description: "Increase/decrease the value by ten steps.", }, { keys: ["Home"], description: "Set the value to the minimum.", }, { keys: ["End"], description: "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

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║