Vue Component with Multi-Thumb Support for Range Selection

21 October 2023
0
48

vue-range-multi(WIP)

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.
📝 Render content above or below the thumb.

Demo

Quick Start

Install

pnpm add vue-range-multi

Use in Vue

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

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

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

Props

generic=”T”

NameTypeDescriptionDefaultRequiredv-model:modelValuenumber | number[] | RangeData<T>[]model value. It will auto detect the type of model and show different thumb(s)[]trueminnumberminimum value0maxnumbermaximum value100stepnumberstep1addablebooleancan add data. This will emit ‘addThumb’falselimitnumberthe limit can be addundefinedsmoothbooleanwith smooth off, the thumb will only show on the stop pointfalsededuplicatebooleancan the thumb be duplicatedtruerangeHighlightbooleanhighlight range between min and max. This will only effect while modelValue is array and length is 2falseshowStopsboolean | numberwhether to show dots on the track. When set to number, will only show dots while stops less than the value12size‘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: RangeData<T>) => VNoderender function on the top of thumbundefinedrenderTopOnActivebooleanonly render top function on the active thumbfalserenderBottom(data: RangeData<T>) => VNoderender bottom function on the bottom of thumbundefinedrenderBottomOnActivebooleanonly render bottom function on the active thumbfalse

events

NameTypeDescriptionadd(value: number): voidadd event while click the track

types

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