Range

A styled <input type="range"> slider with a custom track and thumb that match the library's color scheme.

Basic usage

Value: 60

vue

<script setup>
import { ref } from 'vue'
const vol = ref(60)
</script>

<template>
  <Range v-model="vol" label="Volume" />
</template>

vue

<Range v-model="opacity" label="Opacity" :min="0" :max="100" :step="10" />

vue

<Range v-model="fine" label="Temperature" :min="0" :max="50" :step="0.5" />

vue

<Range v-model="vol" label="Volume" :show-value="false" />

vue

<Range :model-value="40" label="Locked" disabled />

Prop	Type	Default	Description
`modelValue`	`number`	—	Current slider value
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`label`	`string`	—	Label rendered above the slider
`showValue`	`boolean`	`true`	Whether to display the current value next to the label
`disabled`	`boolean`	`false`	Disables interaction

Event	Payload	Description
`update:modelValue`	`number`	New numeric value as the thumb moves