# 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" />

## Anatomy

<Anatomy id="angle-slider" />

```tsx
<AngleSlider.Root>
  <AngleSlider.Label />
  <AngleSlider.Control>
    <AngleSlider.Thumb />
    <AngleSlider.MarkerGroup>
      <AngleSlider.Marker />
    </AngleSlider.MarkerGroup>
  </AngleSlider.Control>
  <AngleSlider.ValueText />
  <AngleSlider.HiddenInput />
</AngleSlider.Root>
```

## Examples

### Basic

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

**Example: basic**

```ripple
import { AngleSlider } from 'ark-ripple/angle-slider';
import styles from 'styles/angle-slider.module.css';

const markers = [0, 45, 90, 135, 180, 225, 270, 315];

export component Basic() {
  <AngleSlider.Root class={styles.Root}>
    <AngleSlider.Label class={styles.Label}>{'Rotation'}</AngleSlider.Label>
    <AngleSlider.Control class={styles.Control}>
      <AngleSlider.MarkerGroup class={styles.MarkerGroup}>
        for (const value of markers; key value) {
          <AngleSlider.Marker {value} class={styles.Marker} />
        }
      </AngleSlider.MarkerGroup>
      <AngleSlider.Thumb class={styles.Thumb} />
    </AngleSlider.Control>
    <AngleSlider.ValueText class={styles.ValueText} />
    <AngleSlider.HiddenInput />
  </AngleSlider.Root>
}

```

### Controlled

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

**Example: controlled**

```ripple
import { AngleSlider } from 'ark-ripple/angle-slider';
import { track } from 'ripple';
import styles from 'styles/angle-slider.module.css';

const markers = [0, 45, 90, 135, 180, 225, 270, 315];

export component Controlled() {
  let value = track(45);

  <AngleSlider.Root
    class={styles.Root}
    {value}
    onValueChange={(e) => {
      @value = e.value;
    }}
  >
    <AngleSlider.Label class={styles.Label}>{'Rotation'}</AngleSlider.Label>
    <AngleSlider.Control class={styles.Control}>
      <AngleSlider.MarkerGroup class={styles.MarkerGroup}>
        for (const marker of markers; key marker) {
          <AngleSlider.Marker value={marker} class={styles.Marker} />
        }
      </AngleSlider.MarkerGroup>
      <AngleSlider.Thumb class={styles.Thumb} />
    </AngleSlider.Control>
    <AngleSlider.ValueText class={styles.ValueText} />
    <AngleSlider.HiddenInput />
  </AngleSlider.Root>
}

```

### Steps

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

**Example: step**

```ripple
import { AngleSlider } from 'ark-ripple/angle-slider';
import styles from 'styles/angle-slider.module.css';

const markers = [0, 45, 90, 135, 180, 225, 270, 315];

export component Step() {
  <AngleSlider.Root class={styles.Root} step={15}>
    <AngleSlider.Label class={styles.Label}>{'15 Step'}</AngleSlider.Label>
    <AngleSlider.Control class={styles.Control}>
      <AngleSlider.MarkerGroup class={styles.MarkerGroup}>
        for (const value of markers; key value) {
          <AngleSlider.Marker {value} class={styles.Marker} />
        }
      </AngleSlider.MarkerGroup>
      <AngleSlider.Thumb class={styles.Thumb} />
    </AngleSlider.Control>
    <AngleSlider.ValueText class={styles.ValueText} />
    <AngleSlider.HiddenInput />
  </AngleSlider.Root>
}

```

## API Reference

### Props

**Component API Reference**

**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 |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--value` | The current value |
| `--angle` | The angle in degrees |


**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 |


**Marker CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--marker-value` | The logical marker value (e.g. 0, 45, 90) |
| `--marker-display-value` | The rotation angle for display (mirrored in RTL) |


**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. |


### Context

**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. |