Components
Slider
Slider, dressed in the paper-and-ink system: a recessed track the primary ink runs along, a paper-seal thumb, and hairline tick markers. The parts — Root, Label, ValueText, Control, Track, Range, Thumb, MarkerGroup, Marker, DraggingIndicator, HiddenInput.
#Basic usage
<script setup lang="ts">
import { Slider } from "@bysages/vue";
</script>
<template>
<Slider.Root :default-value="[40]" :min="0" :max="100" :step="1">
<div class="flex justify-between items-baseline">
<Slider.Label>Volume</Slider.Label>
<Slider.ValueText />
</div>
<Slider.Control>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumb :index="0">
<Slider.HiddenInput />
</Slider.Thumb>
</Slider.Control>
</Slider.Root>
</template>
#Props
#Control
A styled part — no props of its own; it takes the anatomy's shared styling.
#DraggingIndicator
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 | — |
#Range
A styled part — no props of its own; it takes the anatomy's shared styling.
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
size | String as PropType<"sm" | "md" | "lg"> | "md" | One rung of the part-size ladder for the thumb seal. |
aria-label | string[] | The aria-label of each slider thumb. Useful for providing an accessible name to the slider | |
aria-labelledby | string[] | The id of the elements that labels each slider thumb. Useful for providing an accessible name to the slider | |
defaultValue | number[] | The initial value of the slider when rendered. 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 | |
form | string | The associate form of the underlying input element. | |
getAriaValueText | (details: slider.ValueTextDetails) => string | Function that returns a human readable value for the slider thumb | |
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(index: number): string; hiddenInput(index: number): string; control: string; track: string; range: string; label: string; valueText: string; marker(index: number): string; }> | The ids of the elements in the slider. Useful for composition. | |
invalid | boolean | Whether the slider is invalid | |
largeStep | number | 10 * step | The amount to increment or decrement the value by when the shift key is held, or the page up/down keys are pressed |
max | number | 100 | The maximum value of the slider |
min | number | 0 | The minimum value of the slider |
minStepsBetweenThumbs | number | 0 | The minimum permitted steps between multiple thumbs. |
modelValue | number[] | The v-model value of the slider | |
name | string | The name associated with each slider thumb (when used in a form) | |
orientation | 'vertical' | 'horizontal' | "horizontal" | The orientation of the slider |
origin | 'start' | 'center' | "start" | The origin of the slider range - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative) |
readOnly | boolean | Whether the slider is read-only | |
step | number | 1 | The step value of the slider |
thumbAlignment | 'center' | 'contain' | "contain" | The alignment of the slider thumb relative to the track - center: the thumb will extend beyond the bounds of the slider track. - contain: the thumb will be contained within the bounds of the track. |
thumbCollisionBehavior | 'none' | 'push' | 'swap' | "none" | How thumbs behave when they collide during pointer interactions - none: Thumbs cannot move past each other - push: Thumbs push each other - swap: Thumbs swap places |
thumbSize | { width: number; height: number; } | The slider thumbs dimensions |
#Thumb
| Prop | Type | Default | Description |
|---|---|---|---|
index | number | — | |
name | string | undefined | — |
#Track
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.