Slider

Native range

One value on a scale where the rough position matters more than the exact number — volume, zoom, a price ceiling. For an exact number use InputNumber; for a span, Range.

Basic

Volume

35%

Zoom

3×

Brightness (locked)

<script setup lang="ts">
import { ref } from "vue";
import { BlessSlider } from "blessing-ui";
const vol = ref(35);
const zoom = ref(3);
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessSlider v-model="vol" label="Volume" show-value :format="(v) => `${v}%`" />
    </div>
    <div class="col">
      <BlessSlider
        v-model="zoom"
        :min="1"
        :max="5"
        label="Zoom"
        show-value
        :format="(v) => `${v}×`"
      />
    </div>
    <div class="col"><BlessSlider :model-value="60" disabled label="Brightness (locked)" /></div>
  </div>
</template>

• A native range: arrows, Page keys and Home/End all work, and phones use their own drag.
• showValue prints the value beside the label; format sets what's shown and read (35%).
• Inside a Field it gets the field's id, description and error.

Usage

import { BlessSlider } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
min	number	0
max	number	100
step	number	1
disabled	boolean	—
showValue	boolean	—	show current value bubble
format	((v: number) => string)	—
label	string	—
modelValue	number	0

Events

Name	Payload	Description
update:modelValue	[value: number]