# Angle Slider (REACT)



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

**Example: basic**

#### React

```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>
  )
}

```

#### Solid

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { AngleSlider } from '@ark-ui/vue/angle-slider'
import styles from 'styles/angle-slider.module.css'
</script>

<template>
  <AngleSlider.Root :class="styles.Root">
    <AngleSlider.Label :class="styles.Label">Rotation</AngleSlider.Label>
    <AngleSlider.Control :class="styles.Control">
      <AngleSlider.MarkerGroup :class="styles.MarkerGroup">
        <AngleSlider.Marker
          v-for="value in [0, 45, 90, 135, 180, 225, 270, 315]"
          :key="value"
          :value="value"
          :class="styles.Marker"
        />
      </AngleSlider.MarkerGroup>
      <AngleSlider.Thumb :class="styles.Thumb" />
    </AngleSlider.Control>
    <AngleSlider.ValueText :class="styles.ValueText" />
    <AngleSlider.HiddenInput />
  </AngleSlider.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { AngleSlider } from '@ark-ui/svelte/angle-slider'
  import styles from 'styles/angle-slider.module.css'
</script>

<AngleSlider.Root class={styles.Root}>
  <AngleSlider.Label class={styles.Label}>Rotation</AngleSlider.Label>
  <AngleSlider.Control class={styles.Control}>
    <AngleSlider.MarkerGroup class={styles.MarkerGroup}>
      {#each [0, 45, 90, 135, 180, 225, 270, 315] as value}
        <AngleSlider.Marker {value} class={styles.Marker} />
      {/each}
    </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**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { AngleSlider } from '@ark-ui/solid/angle-slider'
import { For, createSignal } from 'solid-js'
import styles from 'styles/angle-slider.module.css'

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { AngleSlider } from '@ark-ui/vue/angle-slider'
import { ref } from 'vue'
import styles from 'styles/angle-slider.module.css'

const value = ref(45)
</script>

<template>
  <AngleSlider.Root :class="styles.Root" :model-value="value" @value-change="(e) => (value = e.value)">
    <AngleSlider.Label :class="styles.Label">Rotation</AngleSlider.Label>
    <AngleSlider.Control :class="styles.Control">
      <AngleSlider.MarkerGroup :class="styles.MarkerGroup">
        <AngleSlider.Marker
          v-for="v in [0, 45, 90, 135, 180, 225, 270, 315]"
          :key="v"
          :value="v"
          :class="styles.Marker"
        />
      </AngleSlider.MarkerGroup>
      <AngleSlider.Thumb :class="styles.Thumb" />
    </AngleSlider.Control>
    <AngleSlider.ValueText :class="styles.ValueText" />
    <AngleSlider.HiddenInput />
  </AngleSlider.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { AngleSlider } from '@ark-ui/svelte/angle-slider'
  import styles from 'styles/angle-slider.module.css'

  let value = $state(45)
</script>

<AngleSlider.Root class={styles.Root} bind:value>
  <AngleSlider.Label class={styles.Label}>Rotation</AngleSlider.Label>
  <AngleSlider.Control class={styles.Control}>
    <AngleSlider.MarkerGroup class={styles.MarkerGroup}>
      {#each [0, 45, 90, 135, 180, 225, 270, 315] as markerValue}
        <AngleSlider.Marker value={markerValue} class={styles.Marker} />
      {/each}
    </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**

#### React

```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>
  )
}

```

#### Solid

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

export const Step = () => {
  return (
    <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 each={[0, 45, 90, 135, 180, 225, 270, 315]}>
            {(value) => <AngleSlider.Marker value={value} class={styles.Marker} />}
          </For>
        </AngleSlider.MarkerGroup>
        <AngleSlider.Thumb class={styles.Thumb} />
      </AngleSlider.Control>
      <AngleSlider.ValueText class={styles.ValueText} />
      <AngleSlider.HiddenInput />
    </AngleSlider.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { AngleSlider } from '@ark-ui/vue/angle-slider'
import styles from 'styles/angle-slider.module.css'
</script>

<template>
  <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">
        <AngleSlider.Marker
          v-for="value in [0, 45, 90, 135, 180, 225, 270, 315]"
          :key="value"
          :value="value"
          :class="styles.Marker"
        />
      </AngleSlider.MarkerGroup>
      <AngleSlider.Thumb :class="styles.Thumb" />
    </AngleSlider.Control>
    <AngleSlider.ValueText :class="styles.ValueText" />
    <AngleSlider.HiddenInput />
  </AngleSlider.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { AngleSlider } from '@ark-ui/svelte/angle-slider'
  import styles from 'styles/angle-slider.module.css'
</script>

<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}>
      {#each [0, 45, 90, 135, 180, 225, 270, 315] as value}
        <AngleSlider.Marker {value} class={styles.Marker} />
      {/each}
    </AngleSlider.MarkerGroup>
    <AngleSlider.Thumb class={styles.Thumb} />
  </AngleSlider.Control>
  <AngleSlider.ValueText class={styles.ValueText} />
  <AngleSlider.HiddenInput />
</AngleSlider.Root>

```

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


**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 marker value value for the Marker |


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


**Root CSS Variables:**

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


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


**Marker CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--marker-value` | The marker value value for the Marker |


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


**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 marker value value for the Marker |


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


**Root CSS Variables:**

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


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


**Marker CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--marker-value` | The marker value value for the Marker |


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

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