https://github.com/wiidede/vue-range-multi
A Vue range / slider component that supports one or more thumb
https://github.com/wiidede/vue-range-multi
range slider vue vue3 vuejs
Last synced: over 1 year ago
JSON representation
A Vue range / slider component that supports one or more thumb
- Host: GitHub
- URL: https://github.com/wiidede/vue-range-multi
- Owner: wiidede
- License: mit
- Created: 2023-10-09T07:45:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-14T01:53:07.000Z (over 2 years ago)
- Last Synced: 2024-04-28T01:11:22.743Z (about 2 years ago)
- Topics: range, slider, vue, vue3, vuejs
- Language: Vue
- Homepage: https://range.wiidede.space/
- Size: 360 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Range Multi
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![JSDocs][jsdocs-src]][jsdocs-href]
[![License][license-src]][license-href]
A Vue range(slider) component that supports 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(render function / slot).
- 🏷 Support display marks under the track.
## Demo
[Demo](https://range.wiidede.space/)
## Quick Start
1. Install
```bash
pnpm add vue-range-multi
```
2. Use in Vue
in SFC
```vue
import { ref } from 'vue'
import { Range } from 'vue-range-multi'
import 'vue-range-multi/style.css'
const model = ref<number>(0)
```
install globally
```ts
// main.ts
import { Range } from 'vue-range-multi'
import 'vue-range-multi/style.css'
app.component('MRange', Range)
```
```ts
declare module 'vue' {
export interface GlobalComponents {
MRange: typeof import('vue-range-multi')['Range']
}
}
```
unplugin-vue-components
```ts
import { VueRangeMultiResolver } from 'vue-range-multi'
// and then add `VueRangeMultiResolver()` into resolvers
```
```ts
// type of options
interface VueRangeMultiResolverOptions {
/**
* The name of the component. It should always CapitalCase
*
* @default 'MRange'
*/
name?: string
}
```
## Props
> [!NOTE]
> After v0.4, `marks`'s key means value rather than percentage
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 specify the data to be added by `addData` prop | false |
| addData | (value: number) => RangeData | 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. | false |
| progress | RangeProgress | Custom track highlight segment | undefined |
| 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 |
## Events
| Name | Type | Description |
| ------ | -------------------------------------------------------------------- | ---------------------------------------------------------- |
| change | (value: RangeValue, thumbValue: U, thumbIndex: number) => void | It will emit when thumb `pointerup` (after move the thumb) |
## 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
```ts
export type RangeValueType = number | RangeData
export interface RangeData> {
value: number
data?: T
disabled?: boolean
unremovable?: boolean
renderTop?: RangeRenderFn
renderBottom?: RangeRenderFn
}
export type RangeRenderFn> = (data: U) => VNode
export type RangeValue> = U | U[]
export type RangeProgress = ([number, number] | {
range: [number, number]
style?: CSSProperties
class?: string
})[]
export type RangeMarks = Record
```
## theme
If you want to customize the theme, just use CSS variables to override the default theme.
```css
.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 */
}
```
## License
[MIT](./LICENSE) License © 2023-PRESENT [wiidede](https://github.com/wiidede)
[npm-version-src]: https://img.shields.io/npm/v/vue-range-multi?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://npmjs.com/package/vue-range-multi
[npm-downloads-src]: https://img.shields.io/npm/dm/vue-range-multi?style=flat&colorA=080f12&colorB=1fa669
[npm-downloads-href]: https://npmjs.com/package/vue-range-multi
[bundle-src]: https://img.shields.io/bundlephobia/minzip/vue-range-multi?style=flat&colorA=080f12&colorB=1fa669&label=minzip
[bundle-href]: https://bundlephobia.com/result?p=vue-range-multi
[license-src]: https://img.shields.io/github/license/wiidede/vue-range-multi.svg?style=flat&colorA=080f12&colorB=1fa669
[license-href]: https://github.com/wiidede/vue-range-multi/blob/main/LICENSE
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
[jsdocs-href]: https://www.jsdocs.io/package/vue-range-multi