GitHub54X

Angle Slider

Vue angle slider to pick a rotation or direction value on a circular control with keyboard support.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/angle-slider.json

Usage

      
      <script setup lang="ts">
import { AngleSlider } from "@/components/ui/angle-slider";
</script>

<template>
  <AngleSlider.Root>
    <!-- … -->
  </AngleSlider.Root>
</template>

Composition

      
      AngleSlider.Root
├── AngleSlider.Context
├── AngleSlider.Control
├── AngleSlider.HiddenInput
├── AngleSlider.Label
├── AngleSlider.MarkerGroup
├── AngleSlider.Marker
├── AngleSlider.RootProvider
├── AngleSlider.Thumb
├── AngleSlider.ValueText

Examples

Controlled

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

Steps

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

API

See Ark UI Angle Slider docs for full props and examples.

Alert DialogAutocomplete