angleSlider
An angle slider picks a rotation between zero and three hundred and sixty degrees. It is the right control when the value is an angle, because a dial shows the answer in the same terms the reader will see it.
<AngleSlider label="Rotation" showValue defaultValue={45} /><AngleSlider label="Rotation" show-value :default-value="45" />markers draws ticks on the ring at the degrees you list, which is how a dial with a few
meaningful positions reads as having them. step is how far one arrow-key press moves.
<AngleSlider markers={[0, 90, 180, 270]} step={15} /><AngleSlider :markers="[0, 90, 180, 270]" :step="15" />label is a caption under the readout, inside the ring, and clicking it focuses the
thumb. name submits the angle under that name inside a form.
The current angle
As with the carousel, the controlled value lives outside the shared contract. React takes
Ark UI’s value, defaultValue, onValueChange and onValueChangeEnd. Vue takes
v-model, with defaultValue as the uncontrolled counterpart.
<AngleSlider value={angle} onValueChange={({ value }) => setAngle(value)} /><AngleSlider v-model="angle" />Slots
The same word names the recipe slot, the data-slot attribute and the key in ui.
- base
- control
- dial
- track
- range
- markers
- marker
- thumb
- content
- value
- label
Variants
Read off the recipe, so these are the values that actually resolve. A Theme layer can change which one is the default; it cannot add a value.
- size
- smmdlg
- color
- primarysecondarysuccessinfowarningerrorneutral
Props
Taken by both adapters, read out of the component module. The same names and the same types work in React and Vue.
- ui
AngleSliderUI
Per-slot class overrides.
- size
"sm" | "md" | "lg"
Defaults to
"md"- color
"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
Defaults to
"primary"- label
string
Caption under the readout, inside the ring. Clicking it focuses the thumb.
- showValue
boolean
Show the current angle in the middle of the ring.
- markers
number[]
Tick values in degrees, drawn on the ring.
- step
number
Degrees per arrow-key press.
- disabled
boolean
- readOnly
boolean
- invalid
boolean
- name
string
Submits the angle under this name inside a form.
Vue only
Binds v-model.
- defaultValue
number
- class
unknown