Components

AngleSlider

Circular dial slider that selects an angle from 0 to 360 degrees by dragging a thumb around a ring.

Component

View code

Show playground

90° degrees

Props

Props	Default	Type
`ariaLabel`	—	`string`
`ariaLabelledby`	—	`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`

Slots

Name	Description
`default`	Replaces the content shown at the center of the dial. Receives the current angle as the `value` slot prop. Rendered even when `showValue` is false.

 <template>
    <AngleSlider v-model="angle">
        <template #default="{ value }">
            <span class="text-lg font-semibold">{{ value }} deg</span>
        </template>
    </AngleSlider>
</template>

<script setup lang="ts">
const angle = ref(120)
</script>

Usage

ariaLabel

Accessible label for the slider thumb. Defaults to Angle slider.

 <template>
    <AngleSlider ariaLabel="Rotation" />
</template>

Type: string

ariaLabelledby

Id of the element that labels the slider thumb. Takes precedence over ariaLabel.

 <template>
    <AngleSlider ariaLabelledby="rotation-label" />
</template>

Type: string

modelValue

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

 <template>
    <AngleSlider v-model="angle" />
</template>

Type: number
Default: 0

color

Sets the accent color of the filled arc and thumb.

 <template>
    <AngleSlider :color="ColorAccent.PRIMARY_BRAND" />
</template>

Type: ColorAccent
Default: ColorAccent.NEUTRAL

size

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

 <template>
    <AngleSlider :size="AngleSliderSize.XL" />
</template>

Type: AngleSliderSize
Default: AngleSliderSize.MD

step

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

 <template>
    <AngleSlider :step="15" />
</template>

Type: number
Default: 1

isRounded

Rounds the start of the filled arc.

 <template>
    <AngleSlider 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>
    <AngleSlider showMarkers />
</template>

Type: boolean
Default: false

showValue

Shows the current value at the center of the dial.

 <template>
    <AngleSlider :showValue="false" />
</template>

Type: boolean
Default: true

valueLabel

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

 <template>
    <AngleSlider valueLabel="deg" />
</template>

Type: string
Default: 'degrees'

disabled

Disables interaction and focus.

 <template>
    <AngleSlider disabled />
</template>

Type: boolean
Default: false

readOnly

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

 <template>
    <AngleSlider readOnly />
</template>

Type: boolean
Default: false

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).
`@change-end`	Emitted with the final angle when the pointer is released or after a keyboard change.

 <template>
    <AngleSlider v-model="angle" @change-end="saveAngle" />
</template>

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