Pick angle value between 0 and 360
Use the AngleSlider component to pick an angle value between 0 and 360:
The AngleSlider value is a number between 0 and 360.
AngleSlider can be used with uncontrolled forms. Set the name attribute to include slider value in FormData object on form submission. To control initial value in uncontrolled forms, use defaultValue prop.
Props for usage with uncontrolled forms:
Example of uncontrolled AngleSlider with FormData :
Use the formatLabel prop to change the angle label format. It accepts a function that takes the angle value and returns a React node:
Set the marks prop to display marks on the slider. A mark is an object with a value (required, number between 0 and 360) and label (optional, React node). To restrict selection to marks only, set the restrictToMarks prop:
The onChangeEnd callback fires when the user stops dragging the slider or changes its value with the keyboard. Use it as a debounced callback to prevent frequent updates.
The disabled prop disables the component and prevents user interaction:
To make the component accessible for screen readers, set the aria-label prop:
Keyboard interactions when the component is focused:
AngleSlider is based on the use-radial-move hook. You can build a custom radial slider using this hook if you need more control over the component's behavior.