0.2.1 • Published 2 months ago
vue-range-multi v0.2.1
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// type of options
interface VueRangeMultiResolverOptions {
/**
* The name of the component. It should always CapitalCase
*
* @default 'MRange'
*/
name?: string
}Props
generic="T = any, U = number | RangeData\"
| 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 |
| vertical | boolean | Determines if the range is vertical. Note that it will generate new classes like 'm-range-v-xxx' | false |
| addable | boolean | Determines if new data can be added/deleted. You can specific the data to be add by addData prop | false |
| addData | (value: number) => RangeData<T, U> | Data to be added. This will only effect while modelValue is RangeData[]. It will return { value } by default | undefined |
| 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 |
| marks | RangeMarks | Show marks under the track | undefined |
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
unremovable?: 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[]
export type RangeMarks = Record<number, string | {
label: string
style?: CSSProperties
class?: string
}>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 */
}