Angle Slider

A component for selecting a value within a circular range.

45°

degrees

Examples

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

Example not found

Example not found

Example not found

Example not found

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

Example not found

Example not found

Example not found

Example not found

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

Example not found

Example not found

Example not found

Example not found

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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.

These are the properties available when using AngleSlider.Context, useAngleSliderContext hook or useAngleSlider hook.

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.