Angle Slider

A component for selecting a value within a circular range.

45°

degrees

Anatomy

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

Controlled

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

Steps

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

API Reference

Props

Root

Renders a <div> element.

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

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

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

Control

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

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

HiddenInput

Renders a <input> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Label

Renders a <label> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

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

MarkerGroup

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Marker

Renders a <div> element.

Prop	Default	Type
`value`		`number` The value of the marker
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

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

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

RootProvider

Renders a <div> element.

Prop	Default	Type
`value`		`UseAngleSliderReturn`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Thumb

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

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

ValueText

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Context

API

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