# Angle Slider

URL: https://ark-ui.com/docs/components/angle-slider
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/angle-slider.mdx

A component for selecting a value within a circular range.

---

<ComponentPreview id="AngleSlider" />

## Examples

### Basic

Here's a basic example of the Angle Slider component.

<Example id="basic" />

### Controlled

Use the `value` and `onValueChange` props to control the value of the Angle Slider.

<Example id="controlled" />

### Steps

Use the `step` prop to set the discrete steps of the Angle Slider.

<Example id="step" />

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `aria-label` | `string` | No | The accessible label for the slider thumb. |
| `aria-labelledby` | `string` | No | The id of the element that labels the slider thumb. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number` | No | The initial value of the slider.
Use when you don't need to control the value of the slider. |
| `disabled` | `boolean` | No | Whether the slider is disabled. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  thumb: string
  hiddenInput: string
  control: string
  valueText: string
  label: string
}>` | No | The ids of the elements in the machine.
Useful for composition. |
| `invalid` | `boolean` | No | Whether the slider is invalid. |
| `name` | `string` | No | The name of the slider. Useful for form submission. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | The callback function for when the value changes. |
| `onValueChangeEnd` | `(details: ValueChangeDetails) => void` | No | The callback function for when the value changes ends. |
| `readOnly` | `boolean` | No | Whether the slider is read-only. |
| `step` | `number` | No | The step value for the slider. |
| `value` | `number` | No | The value of the slider. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | control |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**MarkerGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Marker Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `number` | Yes | The value of the marker |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Marker Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | marker |
| `[data-value]` | The value of the item |
| `[data-state]` |  |
| `[data-disabled]` | Present when disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseAngleSliderReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | thumb |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number` | No | The initial value of the slider.
Use when you don't need to control the value of the slider. |
| `disabled` | `boolean` | No | Whether the slider is disabled. |
| `ids` | `Partial<{
  root: string
  thumb: string
  hiddenInput: string
  control: string
  valueText: string
  label: string
}>` | No | The ids of the elements in the machine.
Useful for composition. |
| `invalid` | `boolean` | No | Whether the slider is invalid. |
| `name` | `string` | No | The name of the slider. Useful for form submission. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | The callback function for when the value changes. |
| `onValueChangeEnd` | `(details: ValueChangeDetails) => void` | No | The callback function for when the value changes ends. |
| `readOnly` | `boolean` | No | Whether the slider is read-only. |
| `step` | `number` | No | The step value for the slider. |
| `value` | `number` | No | The value of the slider. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | control |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**MarkerGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Marker Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `number` | Yes | The value of the marker |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Marker Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | marker |
| `[data-value]` | The value of the item |
| `[data-state]` |  |
| `[data-disabled]` | Present when disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseAngleSliderReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | thumb |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `aria-label` | `string` | No | The aria-label of the slider. |
| `aria-labelledby` | `string` | No | The aria-labelledby of the slider. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number` | No | The initial value of the slider.
Use when you don't need to control the value of the slider. |
| `dir` | `'ltr' | 'rtl'` | No | The document's text/writing direction. |
| `disabled` | `boolean` | No | Whether the slider is disabled. |
| `getRootNode` | `() => ShadowRoot | Node | Document` | No | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; thumb: string; hiddenInput: string; control: string; valueText: string }>` | No | The ids of the elements in the machine.
Useful for composition. |
| `invalid` | `boolean` | No | Whether the slider is invalid. |
| `modelValue` | `number` | No | The v-model value of the angle slider |
| `name` | `string` | No | The name of the slider. Useful for form submission. |
| `readOnly` | `boolean` | No | Whether the slider is read-only. |
| `step` | `number` | No | The step value for the slider. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | control |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**MarkerGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Marker Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `number` | Yes | The value of the marker |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Marker Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | marker |
| `[data-value]` | The value of the item |
| `[data-state]` |  |
| `[data-disabled]` | Present when disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `AngleSliderApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | thumb |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `aria-label` | `string` | No | The accessible label for the slider thumb. |
| `aria-labelledby` | `string` | No | The id of the element that labels the slider thumb. |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number` | No | The initial value of the slider.
Use when you don't need to control the value of the slider. |
| `disabled` | `boolean` | No | Whether the slider is disabled. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  thumb: string
  hiddenInput: string
  control: string
  valueText: string
  label: string
}>` | No | The ids of the elements in the machine.
Useful for composition. |
| `invalid` | `boolean` | No | Whether the slider is invalid. |
| `name` | `string` | No | The name of the slider. Useful for form submission. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | The callback function for when the value changes. |
| `onValueChangeEnd` | `(details: ValueChangeDetails) => void` | No | The callback function for when the value changes ends. |
| `readOnly` | `boolean` | No | Whether the slider is read-only. |
| `ref` | `Element` | No |  |
| `step` | `number` | No | The step value for the slider. |
| `value` | `number` | No | The value of the slider. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseAngleSliderContext]>` | Yes |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | control |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**MarkerGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Marker Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `number` | Yes | The value of the marker |
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Marker Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | marker |
| `[data-value]` | The value of the item |
| `[data-state]` |  |
| `[data-disabled]` | Present when disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseAngleSliderReturn` | Yes |  |
| `ref` | `Element` | No |  |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | angle-slider |
| `[data-part]` | thumb |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


### Context

These are the properties available when using `AngleSlider.Context`, `useAngleSliderContext` hook or `useAngleSlider`
hook.

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `value` | `number` | The current value of the angle slider |
| `valueAsDegree` | `string` | The current value as a degree string |
| `setValue` | `(value: number) => void` | Sets the value of the angle slider |
| `dragging` | `boolean` | Whether the slider is being dragged. |
