Angle Slider

#Basic usage

angle-slider/basic Vue React

Light angle45deg

angle-slider/basic.vue

<script setup lang="ts">
import { AngleSlider } from "@bysages/vue";
import { ref } from "vue";

const value = ref(45);
</script>

<template>
  <AngleSlider.Root v-model="value" class="w-40">
    <AngleSlider.Label>Light angle</AngleSlider.Label>
    <AngleSlider.ValueText />
    <AngleSlider.Control>
      <AngleSlider.MarkerGroup>
        <AngleSlider.Marker :value="0" />
        <AngleSlider.Marker :value="90" />
        <AngleSlider.Marker :value="180" />
        <AngleSlider.Marker :value="270" />
      </AngleSlider.MarkerGroup>
      <AngleSlider.Thumb />
    </AngleSlider.Control>
  </AngleSlider.Root>
</template>

#Props

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#MarkerGroup

A styled part — no props of its own; it takes the anatomy's shared styling.

#Marker

Prop	Type	Default	Description
`value`	`number`		The value of the marker

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the dial ladder — the diameter the needle sweeps.
`aria-label`	`string`		The aria-label of the slider.
`aria-labelledby`	`string`		The aria-labelledby of the slider.
`defaultValue`	`number`	`0`	The initial value of the slider. Use when you don't need to control the value of the slider.
`dir`	`'ltr' \| 'rtl'`	`"ltr"`	The document's text/writing direction.
`disabled`	`boolean`		Whether the slider is disabled.
`getRootNode`	`() => ShadowRoot \| Document \| Node`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; thumb: string; hiddenInput: string; control: string; valueText: string; }>`		The ids of the elements in the machine. Useful for composition.
`invalid`	`boolean`		Whether the slider is invalid.
`modelValue`	`number`		The v-model value of the angle slider
`name`	`string`		The name of the slider. Useful for form submission.
`readOnly`	`boolean`		Whether the slider is read-only.
`step`	`number`	`1`	The step value for the slider.

#Thumb

A styled part — no props of its own; it takes the anatomy's shared styling.

#ValueText

A styled part — no props of its own; it takes the anatomy's shared styling.