Components

AngleSliderField

Form field wrapper around AngleSlider with label, help text, validation, and error handling.

Component

View code

Show playground

Rotation (optional)

90° degrees

Drag the handle to rotate

Props

Props	Required	Default	Type
`id`	`true`	—	`string`
`label`	—	—	`string`
`ariaLabel`	—	—	`string`
`helpText`	—	—	`string`
`helpTextPosition`	—	`Position.BOTTOM`	`Position`
`required`	—	`false`	`boolean`
`showOptionalLabel`	—	`true`	`boolean`
`optionalLabel`	—	—	`string`
`modelValue`	—	`0`	`number`
`color`	—	`ColorAccent.NEUTRAL`	`ColorAccent`
`size`	—	`AngleSliderSize.MD`	`AngleSliderSize`
`step`	—	`1`	`number`
`isRounded`	—	`false`	`boolean`
`showMarkers`	—	`false`	`boolean`
`showValue`	—	`true`	`boolean`
`valueLabel`	—	`'degrees'`	`string`
`disabled`	—	`false`	`boolean`
`readOnly`	—	`false`	`boolean`
`validator`	—	`null`	`function`
`error`	—	`''`	`string`

Usage

id

Unique identifier. Used to link the label with the slider ({id}-label).

 <template>
    <AngleSliderField id="rotation" />
</template>

Type: string

label

Sets the field label.

 <template>
    <AngleSliderField id="rotation" label="Rotation" />
</template>

Type: string

ariaLabel

Accessible label for the thumb when no label is set.

 <template>
    <AngleSliderField id="rotation" ariaLabel="Rotation" />
</template>

Type: string

helpText

Sets the help text.

 <template>
    <AngleSliderField id="rotation" helpText="Drag the handle to rotate" />
</template>

Type: string

helpTextPosition

Sets the help text position (TOP or BOTTOM).

 <template>
    <AngleSliderField id="rotation" :helpTextPosition="Position.TOP" />
</template>

Type: Position
Default: Position.BOTTOM

required

Marks the field as required and enables validation.

 <template>
    <AngleSliderField id="rotation" required />
</template>

Type: boolean
Default: false

showOptionalLabel

Shows the optional label when the field is not required.

 <template>
    <AngleSliderField id="rotation" label="Rotation" :showOptionalLabel="false" />
</template>

Type: boolean
Default: true

optionalLabel

Overrides the optional label text.

 <template>
    <AngleSliderField id="rotation" label="Rotation" optionalLabel="(Optional)" />
</template>

Type: string

modelValue

Current angle in degrees, clamped between 0 and 360. 0 points up and the value grows clockwise.

 <template>
    <AngleSliderField id="rotation" v-model="angle" />
</template>

Type: number
Default: 0

color

Sets the accent color of the filled arc and thumb.

 <template>
    <AngleSliderField id="rotation" :color="ColorAccent.PRIMARY_BRAND" />
</template>

Type: ColorAccent
Default: ColorAccent.NEUTRAL

size

Sets the dial diameter, track thickness and thumb size (XS to XXL).

 <template>
    <AngleSliderField id="rotation" :size="AngleSliderSize.XL" />
</template>

Type: AngleSliderSize
Default: AngleSliderSize.MD

step

Sets the angle increment applied while dragging and with the keyboard.

 <template>
    <AngleSliderField id="rotation" :step="15" />
</template>

Type: number
Default: 1

isRounded

Rounds the start of the filled arc.

 <template>
    <AngleSliderField id="rotation" isRounded />
</template>

Type: boolean
Default: false

showMarkers

Shows tick marks around the inside of the ring every 30°, with longer ticks at 0°, 90°, 180° and 270°.

 <template>
    <AngleSliderField id="rotation" showMarkers />
</template>

Type: boolean
Default: false

showValue

Shows the current value at the center of the dial.

 <template>
    <AngleSliderField id="rotation" :showValue="false" />
</template>

Type: boolean
Default: true

valueLabel

Sets the small caption shown below the value. Use an empty string to hide it.

 <template>
    <AngleSliderField id="rotation" valueLabel="deg" />
</template>

Type: string
Default: 'degrees'

disabled

Disables interaction and focus.

 <template>
    <AngleSliderField id="rotation" disabled />
</template>

Type: boolean
Default: false

readOnly

Shows the value but prevents changing it. The thumb stays focusable.

 <template>
    <AngleSliderField id="rotation" readOnly />
</template>

Type: boolean
Default: false

validator

Sets a custom validator returning an error message or null.

 <template>
    <AngleSliderField id="rotation" required :validator="validateAngle" />
</template>

Type: function
Default: null

error (v-model:error)

Sets the error message of the field. This prop is bindable via v-model:error, allowing two-way syncing of the validation state.

 <template>
    <AngleSliderField id="rotation" v-model:error="errorMessage" />
</template>

Type: string
Default: ''

Accessibility

The thumb uses role="slider" with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext. It is keyboard operable:

Value	Description
`Arrow Right / Up`	Increases the angle by `step`.
`Arrow Left / Down`	Decreases the angle by `step`.
`Page Up / Page Down`	Changes the angle by `step` x 10.
`Home / End`	Sets the angle to `0` / `360`.

Emits

Value	Description
`@update:modelValue`	Emitted on every angle change while dragging or using the keyboard (v-model).
`@update:error`	Emitted with the validation message when the validator runs.
`@change-end`	Emitted with the final angle when the pointer is released or after a keyboard change.

 <template>
    <AngleSliderField id="rotation" v-model="angle" @change-end="saveAngle" />
</template>

<script setup lang="ts">
const angle = ref(0)
const saveAngle = (value: number) => console.log(value)
</script>