ISlider ​

A control for a value where the approximate size matters more than the exact number — volume, opacity, a price ceiling. Where a precise figure is typed, use INumberInput.

<script setup lang="ts">
const volume = ref(60)
</script>

<template>
  <ISlider v-model="volume" label="Volume" show-value />
</template>

The model keeps its shape ​

Pass a number and you get a number back; pass an array and you get an array.

const volume = ref(60) //        → 60
const price = ref([200, 750]) // → [200, 750]

Range ​

Two thumbs on one track. minStepsBetweenThumbs keeps them from crossing or stacking.

<ISlider
  v-model="price"
  label="Price"
  :min="0"
  :max="1000"
  :step="10"
  :min-steps-between-thumbs="1"
  :format-value="v => `$${v}`"
  show-value
  show-scale
/>

Formatting ​

formatValue drives the displayed value, the scale captions and each thumb's accessible label at once.

<ISlider v-model="opacity" label="Opacity" :format-value="v => `${v}%`" show-value show-scale />

Steps ​

A coarse step turns the track into a small set of choices. Use formatValue to name them rather than showing the raw index.

<ISlider
  v-model="quality"
  label="Export quality"
  :min="0"
  :max="3"
  :format-value="v => ['Draft', 'Standard', 'High', 'Maximum'][v]"
  show-value
/>

Sizes ​

The track and thumb scale together, with the thumb staying larger than the track at every size.

<ISlider v-model="value" size="sm" label="Small" />
<ISlider v-model="value" size="md" label="Medium" />
<ISlider v-model="value" size="lg" label="Large" />

Vertical ​

orientation="vertical" stands the track up. showScale is horizontal only.

<ISlider v-model="vertical" orientation="vertical" label="Level" show-value />

Saving on release ​

update:modelValue fires on every step; valueCommit fires once, when the drag or key repeat ends. Send the committed value to the server.

<ISlider v-model="threshold" label="Threshold" show-value @value-commit="save" />

Disabled ​

<ISlider v-model="volume" label="Volume" show-value disabled />

Accessibility ​

The name lands on the thumb, which is the element carrying role="slider". With a label, a single thumb takes the label and a range names each end after it — "Price minimum", "Price maximum". Rename those ends with rangeLabels:

<ISlider v-model="price" label="Preis" :range-labels="['von', 'bis']" />

Without a label, each thumb falls back to its own formatted value. Arrow keys step by step, Home and End jump to min and max, and PageUp/PageDown move in larger jumps.

Props ​

Events ​

Slots ​

Styling ​

Slots: root, header, label, value, slider, track, range, thumb, scale.

<ISlider
  v-model="value"
  label="Custom"
  :ui="{ range: 'bg-success', thumb: 'border-success size-5' }"
/>