Vue Range Multi

A range vue component that support one or more thumb

✨ Support for one or more thumbs.
🔄 Auto-detect the type of model and display the corresponding thumb(s).
🔀 Automatically sort the model values without sorting the DOM.
➕ Ability to add or remove thumbs dynamically.
🚫 Avoid duplicate thumbs by rejecting them.
🍡 Smooth movement or jump movement over the stops.
🎨 Customizable style and theme.
🌓 Supports dark mode.
📍 Render content above or below the thumb.

Demo

Quick Start

Install

pnpm add vue-range-multi

Use in Vue

in SFC

<script setup lang="ts">
import { ref } from 'vue'
import { Range } from 'vue-range-multi'
import 'vue-range-multi/style.css'

const model = ref<number>(0)
</script>

<template>
  <Range v-model="model" />
</template>

install globally

// main.ts
import { Range } from 'vue-range-multi'
import 'vue-range-multi/style.css'

app.component('MRange', Range)

declare module 'vue' {
  export interface GlobalComponents {
    MRange: typeof import('vue-range-multi')['Range']
  }
}

unplugin-vue-components

import { VueRangeMultiResolver } from 'vue-range-multi'

// and then add `VueRangeMultiResolver()` into resolvers

interface VueRangeMultiResolverOptions {
  /**
   * The name of the component. It should be camelCase
   *
   * @default 'MRange'
   */
  name?: string
}

Props

generic="T = any, U = number | RangeData<T>"

Name	Type	Description	Default
v-model:modelValue*	U	U[]	Model value. It will automatically detect the type of model and show the corresponding thumb(s)
min	number	The minimum value allowed	0
max	number	The maximum value allowed	100
step	number	Step	1
addable	boolean	Determines if new data can be added/deleted. This will emit event 'addThumb'	false
limit	number	the limit can be add	undefined
smooth	boolean	Determines if the thumb(s) should only be displayed on the stop points or not	false
deduplicate	boolean	Determines if the thumb(s) can be duplicated	true
rangeHighlight	boolean	Determines if the range between the minimum and maximum values should be highlighted. This only has an effect when the modelValue is an array with a length of 2	false
showStops	boolean \| number	Determines if dots should be displayed on the track. When set to a number, dots will only be displayed if the number of stops is less than the specified value	12
size	'small' \| 'medium' \| 'large'	Track size	'small'
thumbType	'circle' \| 'square' \| 'rect'	Thumb type(default 'rect' while size is 'large', otherwise 'small')	'circle' \| 'rect'
thumbSize	'small' \| 'medium' \| 'large'	Thumb size	'medium'
renderTop	(data: U) => VNode	A render function for displaying content above the thumb	undefined
renderTopOnActive	boolean	Specifies whether to render only while the thumb is active	false
renderBottom	(data: U) => VNode	A render function for displaying content below the thumb	undefined
renderBottomOnActive	boolean	Specifies whether to render only while the thumb is active	false

events

Name	Type	Description
add	(value: number): void	add event while click the track

slots

Name	Type	Description
top	{ data: U }	render above the thumb, only effect while renderTop is undefined
bottom	{ data: U }	render below the thumb, only effect while renderBottom is undefined

types

export type RangeValueType<T> = number | RangeData<T>
export interface RangeData<T, U = RangeValueType<T>> {
  value: number
  data?: T
  disabled?: boolean
  renderTop?: RangeRenderFn<T, U>
  renderBottom?: RangeRenderFn<T, U>
}
export type RangeRenderFn<T, U = RangeValueType<T>> = (data: U) => VNode
export type RangeValue<T, U = RangeValueType<T>> = U | U[]

theme

If you want to customize the theme, just use css variables to override the default theme.

.m-range-theme {
  --c-primary: #409EFF; /* primary color */
  --c-fill: #E4E7ED; /* track's fill color */
  --c-fill-stop: #F5F5F5; /* stop's fill color */
  --c-fill-thumb: #fff;  /* thumb's fill color */
}

TODO

test

JSPM

vue-range-multi

Package Exports

Readme