# Angle Slider

URL: https://ark-ui.com/docs/components/angle-slider
LLM: https://ark-ui.com/llms.txt/components/angle-slider

A component for selecting a value within a circular range.

---



## Anatomy



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

```tsx
import { AngleSlider } from '@ark-ui/react/angle-slider'
import styles from 'styles/angle-slider.module.css'

export const Basic = () => {
  return (
    <AngleSlider.Root className={styles.Root}>
      <AngleSlider.Label className={styles.Label}>Rotation</AngleSlider.Label>
      <AngleSlider.Control className={styles.Control}>
        <AngleSlider.MarkerGroup className={styles.MarkerGroup}>
          {[0, 45, 90, 135, 180, 225, 270, 315].map((value) => (
            <AngleSlider.Marker key={value} value={value} className={styles.Marker} />
          ))}
        </AngleSlider.MarkerGroup>
        <AngleSlider.Thumb className={styles.Thumb} />
      </AngleSlider.Control>
      <AngleSlider.ValueText className={styles.ValueText} />
      <AngleSlider.HiddenInput />
    </AngleSlider.Root>
  )
}
```

### Controlled

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

```tsx
import { AngleSlider } from '@ark-ui/react/angle-slider'
import { useState } from 'react'
import styles from 'styles/angle-slider.module.css'

export const Controlled = () => {
  const [value, setValue] = useState(45)

  return (
    <AngleSlider.Root className={styles.Root} value={value} onValueChange={(e) => setValue(e.value)}>
      <AngleSlider.Label className={styles.Label}>Rotation</AngleSlider.Label>
      <AngleSlider.Control className={styles.Control}>
        <AngleSlider.MarkerGroup className={styles.MarkerGroup}>
          {[0, 45, 90, 135, 180, 225, 270, 315].map((value) => (
            <AngleSlider.Marker key={value} value={value} className={styles.Marker} />
          ))}
        </AngleSlider.MarkerGroup>
        <AngleSlider.Thumb className={styles.Thumb} />
      </AngleSlider.Control>
      <AngleSlider.ValueText className={styles.ValueText} />
      <AngleSlider.HiddenInput />
    </AngleSlider.Root>
  )
}
```

### Steps

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

```tsx
import { AngleSlider } from '@ark-ui/react/angle-slider'
import styles from 'styles/angle-slider.module.css'

export const Step = () => {
  return (
    <AngleSlider.Root className={styles.Root} step={15}>
      <AngleSlider.Label className={styles.Label}>15 Step</AngleSlider.Label>
      <AngleSlider.Control className={styles.Control}>
        <AngleSlider.MarkerGroup className={styles.MarkerGroup}>
          {[0, 45, 90, 135, 180, 225, 270, 315].map((value) => (
            <AngleSlider.Marker key={value} value={value} className={styles.Marker} />
          ))}
        </AngleSlider.MarkerGroup>
        <AngleSlider.Thumb className={styles.Thumb} />
      </AngleSlider.Control>
      <AngleSlider.ValueText className={styles.ValueText} />
      <AngleSlider.HiddenInput />
    </AngleSlider.Root>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`aria-label`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The accessible label for the slider thumb.

**`aria-labelledby`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The id of the element that labels the slider thumb.

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`defaultValue`**
Type: `number`
Required: false
Default Value: `0`
Description: The initial value of the slider.
Use when you don't need to control the value of the slider.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the slider is disabled.

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{
  root: string
  thumb: string
  hiddenInput: string
  control: string
  valueText: string
  label: string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the machine.
Useful for composition.

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the slider is invalid.

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The name of the slider. Useful for form submission.

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: The callback function for when the value changes.

**`onValueChangeEnd`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: The callback function for when the value changes ends.

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the slider is read-only.

**`step`**
Type: `number`
Required: false
Default Value: `1`
Description: The step value for the slider.

**`value`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The value of the slider.

#### Data Attributes

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

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

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

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Label

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

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

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Marker

#### Props

**`value`**
Type: `number`
Required: true
Default Value: `undefined`
Description: The value of the marker

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: angle-slider
**`data-part`**: marker
**`data-value`**: The value of the item
**`data-state`**: 
**`data-disabled`**: Present when disabled

### RootProvider

#### Props

**`value`**
Type: `UseAngleSliderReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Thumb

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

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

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: 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. |