---
id: angle-slider
title: Angle Slider
description: 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 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

<ComponentTypes id="angle-slider" />

### Context

<ContextType id="angle-slider" />
