Slider

VdSlider styles a native <input type="range"> with a themed track, fill and thumb. It renders from pure CSS and binds with v-model (numbers) — with optional label and live value read-out.

Basic With Value

Volume

Brightness

<div class="vd-slider-field">
  <label for="volume" class="vd-form-label">Volume</label>
  <div class="vd-slider-row">
    <input id="volume" type="range" class="vd-slider" min="0" max="100" value="60" />
    <span class="vd-slider-value">60</span>
  </div>
</div>

Custom Range & Step

Price

250

Zoom (0.5 steps)

<input
  type="range"
  class="vd-slider"
  min="0"
  max="500"
  step="10"
  value="250" />

Disabled

Read-only level

<input type="range" class="vd-slider" value="50" disabled />

Decimal Steps

Current zoom: 2×

<input
  type="range"
  class="vd-slider"
  min="1"
  max="5"
  step="0.5"
  value="2" />

API Reference

Usage

<script setup lang="ts">
import { VdSlider } from "@vanduo-oss/vd3";
const volume = ref(60);
</script>

<template>
  <VdSlider v-model="volume" label="Volume" :min="0" :max="100" show-value />
</template>

CSS Classes

Class	Description
`.vd-slider`	Styles a native <input type="range"> — track, fill and thumb
`.vd-slider-field`	Optional wrapper grouping a label above the slider row
`.vd-slider-row`	Flex row that aligns the slider with its value read-out
`.vd-slider-value`	Text element showing the current numeric value

Component API

Prop / event	Description
`v-model (modelValue)`	Two-way bound value (number).
`:min / :max`	Range bounds (defaults 0 / 100).
`:step`	Increment between stops (default 1; accepts decimals).
`:label`	Optional label rendered above the slider.
`:show-value`	Renders the live numeric value beside the track.
`:disabled`	Greys out and blocks interaction when true.
`:name / :id`	Forwarded to the underlying input for forms / labels.
`@update:modelValue`	Fired with the new number as the user drags.

Events

Event	Description
`input`	Native event fired continuously as the thumb moves. In Vue, prefer `@update:modelValue` (via `v-model`), which emits a `number`.

Accessibility

Built on a native range input, so it's fully keyboard operable: ← / → step by step; Home / End jump to min / max.
The component mirrors min/max/value into aria-valuemin / aria-valuemax / aria-valuenow.
Pass a label (or wire id) so screen readers announce what the slider controls.