Range

Two-thumb range on native inputs

A span between two values — a price band, a date window, an age range. For one value use Slider; when people know the exact numbers, two InputNumbers are quicker.

Basic

Price¥1,980 – ¥6,800

Hours9:00 – 17:00

<script setup lang="ts">
import { ref } from "vue";
import { BlessRange } from "blessing-ui";
const price = ref<[number, number]>([1980, 6800]);
const hours = ref<[number, number]>([9, 17]);
</script>

<template>
  <div class="col" style="max-width: 420px">
    <BlessRange
      v-model="price"
      :min="0"
      :max="10000"
      :step="100"
      :gap="500"
      label="Price"
      show-value
      :format="(v) => `¥${v.toLocaleString('ja-JP')}`"
    />
    <BlessRange
      v-model="hours"
      :min="0"
      :max="24"
      label="Hours"
      show-value
      :format="(v) => `${v}:00`"
    />
    <BlessRange :model-value="[30, 70]" disabled />
  </div>
</template>

• Two native ranges, each with its own name ("Price minimum", "Price maximum") and keys. A thumb can't pass the other; gap keeps a minimum distance.
• format sets what's shown and read (¥1,980). name submits both thumbs, low then high.

Usage

import { BlessRange } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
name	string	—	both thumbs submit under this name, low then high
min	number	0
max	number	100
step	number	1
label	string	—
showValue	boolean	false
format	((v: number) => string)	—
disabled	boolean	—
gap	number	0	minimum distance between the thumbs
modelValue	[number, number]	[25, 75]	[low, high]

Events

Name	Payload	Description
update:modelValue	[value: [number, number]]