Components / Forms

RangeSlider

A bounded interval control composed from two native range inputs.

Preview

Install

Run in your project

npx @getweini/cli@latest add range-slider

Use cases

Price interval

Choose a lower and upper bound without crossing thumbs.

Age range

Require a meaningful minimum span between selected endpoints.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import RangeSlider from './components/ui/range-slider/RangeSlider.vue'
const price = ref<[number, number]>([20, 80])
</script>

<template>
  <RangeSlider
    v-model="price"
    start-label="Minimum price"
    end-label="Maximum price"
    start-name="minimum"
    end-name="maximum"
    :min-range="10"
  />
</template>

More examples

Price filter

Give both native range handles distinct names.

Price filter

<script setup lang="ts">
import { ref } from 'vue'
import RangeSlider from './components/ui/range-slider/RangeSlider.vue'
const price = ref<[number, number]>([20, 80])
</script>
<template>
  <RangeSlider v-model="price" :min="0" :max="100" :step="5" start-label="Minimum price" end-label="Maximum price" start-name="minPrice" end-name="maxPrice" />
</template>

Age bracket

minRange preserves at least a ten-year interval.

Age bracket

<script setup lang="ts">
import { ref } from 'vue'
import RangeSlider from './components/ui/range-slider/RangeSlider.vue'
const ages = ref<[number, number]>([25, 55])
const years = (value: number) => value + ' years'
</script>
<template>
  <RangeSlider v-model="ages" :min="18" :max="80" :min-range="10" start-label="Minimum age" end-label="Maximum age" :value-label="years" />
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for RangeSlider
Name	Type	Default or requirement
`v-model`	[number, number]	required
`startLabel / endLabel`	string	required
`min / max / step`	number	0 / 100 / 1
`minRange`	number	0
`startName / endName / form`	string	undefined
`disabled`	boolean	false
`size`	sm \| md \| lg	md
`valueLabel`	(value: number) => string	String

startLabel and endLabel name the two range inputs. minRange prevents the handles from crossing or moving too close together. Set both name props to submit the values with a form.

Implementation notes

The model is a two-number tuple. Set both startName and endName for native form submission.
minRange prevents the handles from becoming too close.

Accessibility and localization

Each thumb is a separate focusable input. Use different, specific start and end labels.