├── pnpm-workspace.yaml
├── .gitignore
├── src
    ├── index.ts
    ├── Range.ts
    ├── shims.d.ts
    ├── Render.vue
    ├── type.ts
    ├── resolver.ts
    ├── utils.ts
    ├── RangeThumb.vue
    └── Range.vue
├── eslint.config.js
├── playground
    ├── tsconfig.json
    ├── src
    │   ├── main.ts
    │   ├── Count.vue
    │   ├── ranges
    │   │   ├── 01Number.vue
    │   │   ├── 02NumberList.vue
    │   │   ├── 05Vertical.vue
    │   │   ├── 03NumberList.vue
    │   │   └── 04RangeDataList.vue
    │   └── App.vue
    ├── components.d.ts
    ├── package.json
    ├── index.html
    ├── vite.config.ts
    ├── public
    │   └── favicon.svg
    └── unocss.config.ts
├── vitest.config.ts
├── netlify.toml
├── tsconfig.json
├── .github
    └── workflows
    │   ├── release.yml
    │   └── ci.yml
├── vite.config.ts
├── LICENSE
├── .vscode
    └── settings.json
├── test
    ├── utils.test.ts
    └── range.test.ts
├── package.json
├── unocss.config.ts
└── README.md


/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - playground
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .cache
 2 | .DS_Store
 3 | .idea
 4 | *.log
 5 | *.tgz
 6 | coverage
 7 | dist
 8 | lib-cov
 9 | logs
10 | node_modules
11 | temp
12 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import 'uno.css'
2 | 
3 | export { default as Range } from './Range.vue'
4 | export * from './resolver'
5 | export * from './type'
6 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import antfu from '@antfu/eslint-config'
2 | 
3 | export default antfu(
4 |   {
5 |     unocss: true,
6 |     formatters: true,
7 |   },
8 | )
9 | 


--------------------------------------------------------------------------------
/src/Range.ts:
--------------------------------------------------------------------------------
1 | import type { InjectionKey, Ref } from 'vue'
2 | 
3 | export const RangeTrackRefKey: InjectionKey<Ref<HTMLElement | undefined>> = Symbol('RangeTrackRefKey')
4 | 


--------------------------------------------------------------------------------
/playground/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../tsconfig.json",
3 |   "compilerOptions": {
4 |     "paths": {
5 |       "vue-range-multi": ["./src"]
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/playground/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import 'uno.css'
4 | import '@unocss/reset/tailwind.css'
5 | 
6 | createApp(App).mount('#app')
7 | 


--------------------------------------------------------------------------------
/src/shims.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import type { DefineComponent } from 'vue'
3 | 
4 |   const component: DefineComponent<object, object, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig, mergeConfig } from 'vitest/config'
 2 | import viteConfig from './vite.config'
 3 | 
 4 | export default mergeConfig(viteConfig, defineConfig({
 5 |   test: {
 6 |     include: ['test/**/*.test.ts'],
 7 |     environment: 'jsdom',
 8 |   },
 9 | }))
10 | 


--------------------------------------------------------------------------------
/src/Render.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { defineComponent } from 'vue'
 3 | 
 4 | export default defineComponent({
 5 |   name: 'Render',
 6 |   props: {
 7 |     render: {
 8 |       type: Function,
 9 |       required: true,
10 |     },
11 |   },
12 |   render() {
13 |     return this.render && this.render()
14 |   },
15 | })
16 | </script>
17 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build]
 2 | publish = "playground/dist"
 3 | command = "pnpm run build:play"
 4 | 
 5 | [build.environment]
 6 | NODE_VERSION = "18"
 7 | 
 8 | [[redirects]]
 9 | from = "/*"
10 | to = "/index.html"
11 | status = 200
12 | 
13 | [[headers]]
14 | for = "/manifest.webmanifest"
15 | 
16 | [headers.values]
17 | Content-Type = "application/manifest+json"
18 | 


--------------------------------------------------------------------------------
/playground/components.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | // @ts-nocheck
 3 | // Generated by unplugin-vue-components
 4 | // Read more: https://github.com/vuejs/core/pull/3399
 5 | // biome-ignore lint: disable
 6 | export {}
 7 | 
 8 | /* prettier-ignore */
 9 | declare module 'vue' {
10 |   export interface GlobalComponents {
11 |     Range: typeof import('vue-range-multi')['Range']
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/playground/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "playground",
 3 |   "type": "module",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "vite build",
 8 |     "preview": "vite preview"
 9 |   },
10 |   "dependencies": {
11 |     "@unocss/reset": "^0.65.3",
12 |     "@vueuse/core": "^12.2.0",
13 |     "vue": "^3.5.13",
14 |     "vue-range-multi": "workspace:*"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/playground/src/Count.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { onMounted, onUnmounted, ref } from 'vue'
 3 | 
 4 | const count = ref(0)
 5 | 
 6 | let interval: number
 7 | onMounted(() => {
 8 |   interval = window.setInterval(() => {
 9 |     count.value++
10 |   }, 1000)
11 | })
12 | 
13 | onUnmounted(() => {
14 |   clearInterval(interval)
15 | })
16 | </script>
17 | 
18 | <template>
19 |   <span>{{ count }}</span>
20 | </template>
21 | 
22 | <style scoped>
23 | 
24 | </style>
25 | 


--------------------------------------------------------------------------------
/playground/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vue Range Multi Demo</title>
 8 |   </head>
 9 |   <body class="font-sans dark:bg-dark text-zinc-900 dark:text-zinc-100">
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2018",
 4 |     "lib": ["esnext", "dom"],
 5 |     "baseUrl": ".",
 6 |     "module": "esnext",
 7 |     "moduleResolution": "node",
 8 |     "resolveJsonModule": true,
 9 |     "types": [
10 |       "vitest",
11 |       "vitest/config",
12 |       "vite/client"
13 |     ],
14 |     "strict": true,
15 |     "strictNullChecks": true,
16 |     "esModuleInterop": true,
17 |     "skipDefaultLibCheck": true,
18 |     "skipLibCheck": true
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/playground/src/ranges/01Number.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | 
 4 | const model = ref<number>(3)
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div>
 9 |     <h2 class="type-title m0">
10 |       number
11 |     </h2>
12 |     <br>
13 |     <div class="flex items-baseline">
14 |       <span class="label">modelValue</span>
15 |       <pre class="value">{{ model }}</pre>
16 |     </div>
17 |     <Range
18 |       v-model="model"
19 |       class="w-full py1"
20 |       :min="0"
21 |       :max="10"
22 |     />
23 |   </div>
24 | </template>
25 | 
26 | <style scoped>
27 | 
28 | </style>
29 | 


--------------------------------------------------------------------------------
/playground/src/ranges/02NumberList.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | 
 4 | const model = ref<number[]>([10, 20])
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div>
 9 |     <div class="flex flex-wrap items-center gap2">
10 |       <h2 class="type-title m0">
11 |         number[]
12 |       </h2>
13 |       <span class="tag">range-highlight</span>
14 |     </div>
15 |     <div class="flex items-baseline">
16 |       <span class="label">modelValue</span>
17 |       <pre class="value">{{ JSON.stringify(model) }}</pre>
18 |     </div>
19 |     <Range
20 |       v-model="model"
21 |       class="w-full py1"
22 |       range-highlight
23 |       size="medium"
24 |       thumb-size="small"
25 |     />
26 |   </div>
27 | </template>
28 | 
29 | <style scoped>
30 | 
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/type.ts:
--------------------------------------------------------------------------------
 1 | import type { CSSProperties, VNode } from 'vue'
 2 | 
 3 | export type RangeValueType<T> = number | RangeData<T>
 4 | export interface RangeData<T, U = RangeValueType<T>> {
 5 |   value: number
 6 |   data?: T
 7 |   disabled?: boolean
 8 |   unremovable?: boolean
 9 |   limits?: [number, number]
10 |   renderTop?: RangeRenderFn<T, U>
11 |   renderBottom?: RangeRenderFn<T, U>
12 | }
13 | export type RangeRenderFn<T, U = RangeValueType<T>> = (data: U) => VNode
14 | export type RangeValue<T, U = RangeValueType<T>> = U | U[]
15 | export type RangeProgress = ([number, number] | {
16 |   range: [number, number]
17 |   style?: CSSProperties
18 |   class?: string
19 | })[]
20 | export type RangeMarks = Record<number, string | {
21 |   label: string
22 |   style?: CSSProperties
23 |   class?: string
24 | }>
25 | 


--------------------------------------------------------------------------------
/src/resolver.ts:
--------------------------------------------------------------------------------
 1 | import type { ComponentResolver } from 'unplugin-vue-components'
 2 | 
 3 | export interface VueRangeMultiResolverOptions {
 4 |   /**
 5 |    * The name of the component. It should always CapitalCase
 6 |    *
 7 |    * @default 'MRange'
 8 |    */
 9 |   name?: string
10 | }
11 | 
12 | export function VueRangeMultiResolver(option: VueRangeMultiResolverOptions = {}): ComponentResolver {
13 |   option = {
14 |     name: 'MRange',
15 |     ...option,
16 |   }
17 | 
18 |   return {
19 |     type: 'component',
20 |     resolve: (name: string) => {
21 |       if (name === option.name) {
22 |         return {
23 |           name: 'Range',
24 |           as: name,
25 |           from: 'vue-range-multi',
26 |           sideEffects: 'vue-range-multi/style.css',
27 |         }
28 |       }
29 |     },
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/playground/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from 'node:path'
 2 | import Vue from '@vitejs/plugin-vue'
 3 | import Unocss from 'unocss/vite'
 4 | import Component from 'unplugin-vue-components/vite'
 5 | import { defineConfig } from 'vite'
 6 | import Inspect from 'vite-plugin-inspect'
 7 | import { VueRangeMultiResolver } from '../src/resolver'
 8 | 
 9 | export default defineConfig(({ mode }) => ({
10 |   plugins: [
11 |     Vue(),
12 |     Component({
13 |       resolvers: [VueRangeMultiResolver({ name: 'Range' })],
14 |     }),
15 |     Unocss(),
16 |     Inspect(),
17 |     {
18 |       name: 'blank',
19 |       load(id) {
20 |         if (mode === 'play' && id.endsWith('vue-range-multi/style.css'))
21 |           return ''
22 |       },
23 |     },
24 |   ],
25 |   resolve: {
26 |     alias: mode === 'play'
27 |       ? [
28 |           { find: /^vue-range-multi$/, replacement: path.resolve(__dirname, '../src/index.ts') },
29 |         ]
30 |       : [],
31 |   },
32 | }))
33 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - 'v*'
 7 | 
 8 | jobs:
 9 |   release:
10 |     permissions:
11 |       contents: write
12 |       id-token: write
13 |     runs-on: ubuntu-latest
14 |     steps:
15 |       - uses: actions/checkout@v4
16 |         with:
17 |           fetch-depth: 0
18 | 
19 |       - name: Install pnpm
20 |         uses: pnpm/action-setup@v3
21 | 
22 |       - name: Set node
23 |         uses: actions/setup-node@v4
24 |         with:
25 |           node-version: lts/*
26 |           registry-url: 'https://registry.npmjs.org'
27 | 
28 |       - run: npx changelogithub
29 |         env:
30 |           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
31 | 
32 |       - name: Setup
33 |         run: npm i -g @antfu/ni
34 | 
35 |       - name: Install
36 |         run: nci
37 | 
38 |       - run: pnpm publish --access public --no-git-checks
39 |         env:
40 |           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
41 |           NPM_CONFIG_PROVENANCE: true
42 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'node:path'
 2 | import Vue from '@vitejs/plugin-vue'
 3 | import Unocss from 'unocss/vite'
 4 | import { defineConfig } from 'vite'
 5 | import dts from 'vite-plugin-dts'
 6 | 
 7 | export default defineConfig({
 8 |   plugins: [
 9 |     Vue(),
10 | 
11 |     Unocss(),
12 | 
13 |     dts({
14 |       rollupTypes: true,
15 |     }),
16 |   ],
17 |   build: {
18 |     sourcemap: true,
19 |     lib: {
20 |       // Could also be a dictionary or array of multiple entry points
21 |       entry: resolve(__dirname, 'src/index.ts'),
22 |       name: 'vue-range-multi',
23 |       // the proper extensions will be added
24 |       fileName: 'index',
25 |       cssFileName: 'style',
26 |     },
27 |     rollupOptions: {
28 |       // make sure to externalize deps that shouldn't be bundled
29 |       // into your library
30 |       external: ['vue'],
31 |       output: {
32 |         // Provide global variables to use in the UMD build
33 |         // for externalized deps
34 |         globals: {
35 |           vue: 'Vue',
36 |         },
37 |       },
38 |     },
39 |   },
40 | })
41 | 


--------------------------------------------------------------------------------
/playground/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect x="9" y="32" width="172" height="128" rx="12" fill="white" fill-opacity="0.5"/>
 3 | <rect x="13" y="78" width="164" height="36" rx="8" fill="#E4F7B0" fill-opacity="0.5"/>
 4 | <rect x="70" y="78" width="50" height="36" fill="#BBE36C"/>
 5 | <circle cx="120" cy="96" r="16" fill="white" stroke="#BBE36C" stroke-width="4"/>
 6 | <circle cx="72" cy="96" r="16" fill="white" stroke="#BBE36C" stroke-width="4"/>
 7 | <rect x="13" y="36" width="164" height="24" rx="8" fill="#E5E7EC" fill-opacity="0.5"/>
 8 | <circle cx="95" cy="48" r="14" fill="white" stroke="#5A9CF8" stroke-width="4"/>
 9 | <path d="M13 140C13 135.582 16.5817 132 21 132H169C173.418 132 177 135.582 177 140V148C177 152.418 173.418 156 169 156H21C16.5817 156 13 152.418 13 148V140Z" fill="#E5E7EC" fill-opacity="0.5"/>
10 | <circle cx="95" cy="144" r="14" fill="white" stroke="#5A9CF8" stroke-width="4"/>
11 | <circle cx="48" cy="144" r="14" fill="white" stroke="#5A9CF8" stroke-width="4"/>
12 | <circle cx="144" cy="144" r="14" fill="white" stroke="#5A9CF8" stroke-width="4"/>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 wiidede <https://github.com/wiidede>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/playground/unocss.config.ts:
--------------------------------------------------------------------------------
 1 | import { defu } from 'defu'
 2 | import {
 3 |   defineConfig,
 4 |   presetAttributify,
 5 |   presetIcons,
 6 |   presetTypography,
 7 |   presetWind3,
 8 |   transformerDirectives,
 9 |   transformerVariantGroup,
10 | } from 'unocss'
11 | import rootConfig from '../unocss.config'
12 | 
13 | export default defineConfig(defu({
14 |   shortcuts: [
15 |     ['tag', 'inline-block bg-zinc-100 dark:bg-zinc-900 text-zinc-600 dark:text-zinc-400 text-0.8em px-2 leading-normal rd h-fit w-fit'],
16 |     ['type-title', 'text-2xl inline font-normal font-mono text-zinc-800 dark:text-zinc-200'],
17 |     ['label', 'text-zinc-900 dark:text-zinc-200 after:content-[":"] mr1 ws-nowrap'],
18 |     ['value', 'text-sm inline-block m0 p0 ws-pre-wrap text-zinc-700 dark:text-zinc-400 b b-solid b-zinc-300 bg-zinc-50 dark:bg-zinc-900 dark:b-zinc-700 rd'],
19 |   ],
20 |   presets: [
21 |     presetWind3(),
22 |     presetAttributify(),
23 |     presetIcons({
24 |       scale: 1.2,
25 |       warn: true,
26 |     }),
27 |     presetTypography(),
28 |   ],
29 |   transformers: [
30 |     transformerDirectives(),
31 |     transformerVariantGroup(),
32 |   ],
33 |   rules: [
34 |   ],
35 | }, rootConfig))
36 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | export function swap<T extends object>(arr: T, i: keyof T, j: keyof T): void {
 2 |   [arr[i], arr[j]] = [arr[j], arr[i]]
 3 | }
 4 | 
 5 | export function percentage2value(percentage: number, min: number, max: number, step: number) {
 6 |   if (min === undefined || max === undefined || step === undefined)
 7 |     return Number.NaN
 8 |   if (max <= min)
 9 |     return Number.NaN
10 |   if (percentage < 0)
11 |     return min
12 |   if (percentage > 100)
13 |     return max
14 |   const value = min + (max - min) * percentage / 100
15 |   return Math.round(value / step) * step
16 | }
17 | 
18 | export function value2percentage(value: number, min: number, max: number, step: number) {
19 |   if (min === undefined || max === undefined || step === undefined)
20 |     return Number.NaN
21 |   if (max <= min)
22 |     return Number.NaN
23 |   if (value < min)
24 |     return 0
25 |   if (value > max)
26 |     return 100
27 |   const percentage = (value - min) / (max - min) * 100
28 |   const percentageStep = step / (max - min)
29 |   return Math.round(percentage / percentageStep) * percentageStep
30 | }
31 | 
32 | export const PromiseTimeout = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
33 | 


--------------------------------------------------------------------------------
/playground/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useDark, useToggle } from '@vueuse/core'
 3 | 
 4 | const ranges = import.meta.glob('./ranges/*.vue', { eager: true, import: 'default' })
 5 | 
 6 | const isDark = useDark()
 7 | const toggleDark = useToggle(isDark)
 8 | </script>
 9 | 
10 | <template>
11 |   <main class="m-auto prose">
12 |     <h1 class="text-4xl font-serif dark:text-zinc-50">
13 |       Vue Range Multi Demo
14 |     </h1>
15 |     <div class="flex flex-col gap-12">
16 |       <component :is="range" v-for="range in ranges" :key="range" />
17 |     </div>
18 |   </main>
19 |   <footer class="m-auto mt8 prose">
20 |     <button icon-btn title="toggle dark mode" @click="toggleDark()">
21 |       <div i="carbon-sun dark:carbon-moon" />
22 |     </button>
23 |     <div class="flex gap4">
24 |       <a href="https://github.com/wiidede/vue-range-multi" target="_blank">GitHub</a>
25 |       <a href="https://github.com/wiidede/vue-range-multi/blob/main/playground/src/App.vue" target="_blank">Demo Source</a>
26 |     </div>
27 |     <div class="text-sm">
28 |       <a href="https://github.com/wiidede/vue-range-multi/blob/main/LICENSE">MIT</a> License © 2023-PRESENT <a href="https://github.com/wiidede">wiidede</a>
29 |     </div>
30 |   </footer>
31 | </template>
32 | 
33 | <style scoped>
34 | a {
35 |   --at-apply: underline decoration-zinc-400/50 after-content-[ '↗'] after-text-0.8em after-op67;
36 | }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/playground/src/ranges/05Vertical.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { RangeData } from 'vue-range-multi'
 3 | import { h, ref } from 'vue'
 4 | 
 5 | const model = ref<RangeData<string>[]>([
 6 |   { data: 'disabled', value: 2, disabled: true },
 7 |   { data: 'random1', value: 4, limits: [2, 10] },
 8 |   { data: 'unremovable', value: 8, unremovable: true },
 9 | ])
10 | function handleAddData(value: number) {
11 |   return {
12 |     data: `random${Math.floor(Math.random() * 10)}`,
13 |     value,
14 |   }
15 | }
16 | </script>
17 | 
18 | <template>
19 |   <div class="flex justify-between">
20 |     <div class="flex flex-col gap1">
21 |       <h2 class="type-title m0">
22 |         Vertical
23 |       </h2>
24 |       <span class="tag">vertical</span>
25 |       <span class="tag">slot</span>
26 |       <span class="tag">limit:5</span>
27 |       <span class="tag">thumb-limits:[1,9]</span>
28 |     </div>
29 |     <Range
30 |       v-model="model"
31 |       class="h-60 pl-20 pr8"
32 |       :max="10"
33 |       addable
34 |       vertical
35 |       thumb-size="large"
36 |       :limit="5"
37 |       :thumb-limits="[1, 9]"
38 |       :render-bottom="(data) => h('div', data.value)"
39 |       :add-data="handleAddData"
40 |     >
41 |       <template #top="{ data }">
42 |         <div class="value px-2">
43 |           {{ JSON.stringify(data) }}
44 |         </div>
45 |       </template>
46 |     </Range>
47 |   </div>
48 | </template>
49 | 
50 | <style scoped>
51 | .m-range {
52 |   --c-drop: #80808080;
53 | }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Disable the default formatter, use eslint instead
 3 |   "prettier.enable": false,
 4 |   "editor.formatOnSave": false,
 5 | 
 6 |   // Auto fix
 7 |   "editor.codeActionsOnSave": {
 8 |     "source.fixAll.eslint": "explicit",
 9 |     "source.organizeImports": "never"
10 |   },
11 | 
12 |   // Silent the stylistic rules in you IDE, but still auto fix them
13 |   "eslint.rules.customizations": [
14 |     { "rule": "style/*", "severity": "off", "fixable": true },
15 |     { "rule": "format/*", "severity": "off", "fixable": true },
16 |     { "rule": "*-indent", "severity": "off", "fixable": true },
17 |     { "rule": "*-spacing", "severity": "off", "fixable": true },
18 |     { "rule": "*-spaces", "severity": "off", "fixable": true },
19 |     { "rule": "*-order", "severity": "off", "fixable": true },
20 |     { "rule": "*-dangle", "severity": "off", "fixable": true },
21 |     { "rule": "*-newline", "severity": "off", "fixable": true },
22 |     { "rule": "*quotes", "severity": "off", "fixable": true },
23 |     { "rule": "*semi", "severity": "off", "fixable": true }
24 |   ],
25 | 
26 |   // Enable eslint for all supported languages
27 |   "eslint.validate": [
28 |     "javascript",
29 |     "javascriptreact",
30 |     "typescript",
31 |     "typescriptreact",
32 |     "vue",
33 |     "html",
34 |     "markdown",
35 |     "json",
36 |     "jsonc",
37 |     "yaml",
38 |     "toml",
39 |     "xml",
40 |     "gql",
41 |     "graphql",
42 |     "astro",
43 |     "svelte",
44 |     "css",
45 |     "less",
46 |     "scss",
47 |     "pcss",
48 |     "postcss"
49 |   ]
50 | }
51 | 


--------------------------------------------------------------------------------
/playground/src/ranges/03NumberList.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { RangeMarks } from 'vue-range-multi'
 3 | import { h, ref } from 'vue'
 4 | import Count from '../Count.vue'
 5 | 
 6 | const model = ref<number[]>([10, 30, 50, 70, 90])
 7 | const marks: RangeMarks = {
 8 |   15: '15%',
 9 |   25: { label: '25%', class: 'c-zinc-400' },
10 |   50: { label: 'center', class: 'c-primary text-0.8em' },
11 | }
12 | </script>
13 | 
14 | <template>
15 |   <div>
16 |     <div class="flex flex-wrap items-center gap2">
17 |       <h2 class="type-title m0">
18 |         number[]
19 |       </h2>
20 |       <span class="tag">addable</span>
21 |       <span class="tag">smooth</span>
22 |       <span class="tag">show-stops</span>
23 |       <span class="tag">thumb-type:square</span>
24 |     </div>
25 |     <div class="flex items-baseline">
26 |       <span class="label">modelValue</span>
27 |       <pre class="value">{{ JSON.stringify(model) }}</pre>
28 |     </div>
29 |     <Range
30 |       v-model="model"
31 |       class="range-lime w-full pb1 pt8"
32 |       :step="5"
33 |       addable
34 |       smooth
35 |       show-stops
36 |       size="medium"
37 |       thumb-type="square"
38 |       thumb-size="large"
39 |       :marks="marks"
40 |       :render-top="() => h(Count, { class: 'c-primary' })"
41 |     />
42 |   </div>
43 | </template>
44 | 
45 | <style scoped>
46 | .range-lime {
47 |   --c-fill-stop: #f7fee7;
48 |   --c-fill-thumb: #f7fee7;
49 |   --c-fill: #dff8a7;
50 |   --c-primary: #b1e457;
51 | }
52 | 
53 | .dark .range-lime {
54 |   --c-fill-stop: #73a132;
55 |   --c-fill-thumb: #73a132;
56 |   --c-fill: #b1e457;
57 |   --c-primary: #94ca42;
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 |   pull_request:
 9 |     branches:
10 |       - main
11 | 
12 | jobs:
13 |   lint:
14 |     runs-on: ubuntu-latest
15 |     steps:
16 |       - uses: actions/checkout@v4
17 | 
18 |       - name: Install pnpm
19 |         uses: pnpm/action-setup@v3
20 | 
21 |       - name: Set node
22 |         uses: actions/setup-node@v4
23 |         with:
24 |           node-version: lts/*
25 | 
26 |       - name: Setup
27 |         run: npm i -g @antfu/ni
28 | 
29 |       - name: Install
30 |         run: nci
31 | 
32 |       - name: Lint
33 |         run: nr lint
34 | 
35 |   typecheck:
36 |     runs-on: ubuntu-latest
37 |     steps:
38 |       - uses: actions/checkout@v4
39 | 
40 |       - name: Install pnpm
41 |         uses: pnpm/action-setup@v3
42 | 
43 |       - name: Set node
44 |         uses: actions/setup-node@v4
45 |         with:
46 |           node-version: lts/*
47 | 
48 |       - name: Setup
49 |         run: npm i -g @antfu/ni
50 | 
51 |       - name: Install
52 |         run: nci
53 | 
54 |       - name: Build
55 |         run: nr build
56 | 
57 |       - name: Typecheck
58 |         run: nr typecheck
59 | 
60 |   test:
61 |     runs-on: ubuntu-latest
62 | 
63 |     steps:
64 |       - uses: actions/checkout@v4
65 | 
66 |       - name: Install pnpm
67 |         uses: pnpm/action-setup@v3
68 | 
69 |       - name: Set node
70 |         uses: actions/setup-node@v4
71 |         with:
72 |           node-version: lts/*
73 | 
74 |       - name: Setup
75 |         run: npm i -g @antfu/ni
76 | 
77 |       - name: Install
78 |         run: nci
79 | 
80 |       - name: Build
81 |         run: nr build
82 | 
83 |       - name: Test
84 |         run: nr test
85 | 


--------------------------------------------------------------------------------
/test/utils.test.ts:
--------------------------------------------------------------------------------
 1 | import { describe, expect, it } from 'vitest'
 2 | import { percentage2value, swap, value2percentage } from '../src/utils'
 3 | 
 4 | describe('swap', () => {
 5 |   it('should swap elements in an array', () => {
 6 |     const arr = [1, 2, 3]
 7 |     swap(arr, 0, 2)
 8 |     expect(arr).toEqual([3, 2, 1])
 9 |   })
10 |   it('should swap elements in an object', () => {
11 |     const obj = { a: 1, b: 2, c: 3 }
12 |     swap(obj, 'a', 'c')
13 |     expect(obj).toEqual({ a: 3, b: 2, c: 1 })
14 |   })
15 | })
16 | 
17 | describe('value and percentage conversion', () => {
18 |   it('should convert percentage to value', () => {
19 |     expect(percentage2value(-1, 0, 100, 1)).toEqual(0)
20 |     expect(percentage2value(0, 0, 100, 1)).toEqual(0)
21 |     expect(percentage2value(50, 0, 100, 1)).toEqual(50)
22 |     expect(percentage2value(50.0001, 0, 100, 1)).toEqual(50)
23 |     expect(percentage2value(100, 0, 100, 1)).toEqual(100)
24 |     expect(percentage2value(101, 0, 100, 1)).toEqual(100)
25 |     expect(percentage2value(1, 1, 0, 1)).toEqual(Number.NaN)
26 |     expect(percentage2value(1, 1, 1, 1)).toEqual(Number.NaN)
27 |     expect(percentage2value(Number.NaN, 0, 100, 1)).toEqual(Number.NaN)
28 |     expect(percentage2value(Number.NaN, Number.NaN, Number.NaN, Number.NaN)).toEqual(Number.NaN)
29 |   })
30 | 
31 |   it('should convert value to percentage', () => {
32 |     expect(value2percentage(-1, 0, 100, 1)).toEqual(0)
33 |     expect(value2percentage(0, 0, 100, 1)).toEqual(0)
34 |     expect(value2percentage(50, 0, 100, 1)).toEqual(50)
35 |     expect(value2percentage(50.0001, 0, 100, 1)).toEqual(50)
36 |     expect(value2percentage(100, 0, 100, 1)).toEqual(100)
37 |     expect(value2percentage(101, 0, 100, 1)).toEqual(100)
38 |     expect(value2percentage(1, 1, 0, 1)).toEqual(Number.NaN)
39 |     expect(value2percentage(1, 1, 1, 1)).toEqual(Number.NaN)
40 |     expect(value2percentage(Number.NaN, 0, 100, 1)).toEqual(Number.NaN)
41 |     expect(value2percentage(Number.NaN, Number.NaN, Number.NaN, Number.NaN)).toEqual(Number.NaN)
42 |   })
43 | })
44 | 


--------------------------------------------------------------------------------
/playground/src/ranges/04RangeDataList.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { RangeData, RangeProgress } from 'vue-range-multi'
 3 | import { computed, h, ref } from 'vue'
 4 | 
 5 | const model = ref<RangeData<string>[]>([
 6 |   { data: '00:00', value: 10, disabled: true },
 7 |   { data: '30:00', value: 40 },
 8 |   { data: '50:00', value: 80 },
 9 |   { data: '59:59', value: 90, unremovable: true },
10 | ])
11 | 
12 | const backgrounds = ['!bg-cyan', '!bg-violet', '!bg-rose', '!bg-lime']
13 | const progress = computed(() => {
14 |   const p: RangeProgress = []
15 |   for (let i = 0; i < model.value.length - 1; i += 2) {
16 |     p.push({
17 |       range: [model.value[i].value, model.value[i + 1]?.value ?? 100],
18 |       class: backgrounds[(i / 2) % backgrounds.length],
19 |     })
20 |   }
21 |   return p
22 | })
23 | function handleAddData(value: number) {
24 |   const date = new Date()
25 |   return {
26 |     data: `${date.getMinutes()}:${date.getSeconds()}`,
27 |     value,
28 |   }
29 | }
30 | </script>
31 | 
32 | <template>
33 |   <div>
34 |     <div class="flex flex-wrap items-center gap2">
35 |       <h2 class="type-title m0">
36 |         RangeData[]
37 |       </h2>
38 |       <span class="tag">addable</span>
39 |       <span class="tag">progress</span>
40 |       <span class="tag">thumb-type:rect</span>
41 |       <span class="tag">render-top-on-active</span>
42 |     </div>
43 |     <div class="flex items-baseline">
44 |       <span class="label">modelValue</span>
45 |       <pre class="value">{{ JSON.stringify(model) }}</pre>
46 |     </div>
47 |     <Range
48 |       v-model="model"
49 |       class="w-full py8"
50 |       addable
51 |       :progress="progress"
52 |       :add-data="handleAddData"
53 |       size="large"
54 |       thumb-type="rect"
55 |       render-top-on-active
56 |       :render-top="(data) => h('div', data.value)"
57 |       :render-bottom="(data) => h('div', data.data)"
58 |     />
59 |   </div>
60 | </template>
61 | 
62 | <style scoped>
63 | .m-range :deep(.m-range-track) {
64 |   border-radius: 6px;
65 | }
66 | </style>
67 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "vue-range-multi",
  3 |   "type": "module",
  4 |   "version": "0.5.0",
  5 |   "packageManager": "pnpm@10.7.0",
  6 |   "description": "A Vue range / slider component that supports one or more thumb",
  7 |   "author": "wiidede <wiixdede@gmail.com>",
  8 |   "license": "MIT",
  9 |   "funding": "https://wiidede.space/sponsor",
 10 |   "homepage": "https://github.com/wiidede/vue-range-multi#readme",
 11 |   "repository": {
 12 |     "type": "git",
 13 |     "url": "git+https://github.com/wiidede/vue-range-multi.git"
 14 |   },
 15 |   "bugs": "https://github.com/wiidede/vue-range-multi/issues",
 16 |   "keywords": [
 17 |     "vue",
 18 |     "vue3",
 19 |     "range",
 20 |     "slider",
 21 |     "vue-range-multi",
 22 |     "multi thumb"
 23 |   ],
 24 |   "sideEffects": false,
 25 |   "exports": {
 26 |     ".": {
 27 |       "types": "./dist/index.d.ts",
 28 |       "import": "./dist/index.js",
 29 |       "require": "./dist/index.umd.cjs"
 30 |     },
 31 |     "./style.css": "./dist/style.css",
 32 |     "./dist/style.css": "./dist/style.css"
 33 |   },
 34 |   "main": "./dist/index.umd.cjs",
 35 |   "module": "./dist/index.js",
 36 |   "types": "./dist/index.d.ts",
 37 |   "typesVersions": {
 38 |     "*": {
 39 |       "*": [
 40 |         "./dist/*",
 41 |         "./dist/index.d.ts"
 42 |       ]
 43 |     }
 44 |   },
 45 |   "files": [
 46 |     "dist"
 47 |   ],
 48 |   "scripts": {
 49 |     "build": "vite build",
 50 |     "dev": "vite playground --mode play",
 51 |     "dev:pkg": "vite playground",
 52 |     "preview": "vite preview playground",
 53 |     "build:play": "vite build && vite build playground",
 54 |     "lint": "eslint .",
 55 |     "prepublishOnly": "nr build",
 56 |     "release": "pnpm lint && pnpm typecheck && pnpm build && bumpp",
 57 |     "start": "esno src/index.ts",
 58 |     "test": "vitest",
 59 |     "typecheck": "vue-tsc --noEmit",
 60 |     "prepare": "simple-git-hooks"
 61 |   },
 62 |   "peerDependencies": {
 63 |     "vue": "^3.0.0"
 64 |   },
 65 |   "devDependencies": {
 66 |     "@antfu/eslint-config": "^4.11.0",
 67 |     "@antfu/ni": "^24.3.0",
 68 |     "@antfu/utils": "^9.1.0",
 69 |     "@iconify-json/carbon": "^1.2.8",
 70 |     "@types/jsdom": "^21.1.7",
 71 |     "@types/node": "^22.13.14",
 72 |     "@unocss/eslint-config": "^66.1.0-beta.7",
 73 |     "@vitejs/plugin-vue": "^5.2.3",
 74 |     "@vue/test-utils": "^2.4.6",
 75 |     "bumpp": "^10.1.0",
 76 |     "defu": "^6.1.4",
 77 |     "eslint": "^9.23.0",
 78 |     "eslint-plugin-format": "^1.0.1",
 79 |     "esno": "^4.8.0",
 80 |     "jsdom": "^26.0.0",
 81 |     "lint-staged": "^15.5.0",
 82 |     "pnpm": "^10.7.0",
 83 |     "rimraf": "^6.0.1",
 84 |     "simple-git-hooks": "^2.12.1",
 85 |     "typescript": "^5.8.2",
 86 |     "unocss": "^66.1.0-beta.7",
 87 |     "unplugin-vue-components": "^28.4.1",
 88 |     "vite": "^6.2.3",
 89 |     "vite-plugin-dts": "^4.5.3",
 90 |     "vite-plugin-inspect": "^11.0.0",
 91 |     "vitest": "^3.0.9",
 92 |     "vue": "^3.5.13",
 93 |     "vue-tsc": "^2.2.8"
 94 |   },
 95 |   "pnpm": {
 96 |     "onlyBuiltDependencies": [
 97 |       "esbuild",
 98 |       "simple-git-hooks"
 99 |     ]
100 |   },
101 |   "simple-git-hooks": {
102 |     "pre-commit": "pnpm lint-staged"
103 |   },
104 |   "lint-staged": {
105 |     "*": "eslint --fix"
106 |   }
107 | }
108 | 


--------------------------------------------------------------------------------
/unocss.config.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   defineConfig,
  3 |   presetAttributify,
  4 |   presetIcons,
  5 |   presetTypography,
  6 |   presetWind3,
  7 |   transformerDirectives,
  8 |   transformerVariantGroup,
  9 | } from 'unocss'
 10 | 
 11 | export default defineConfig({
 12 |   shortcuts: [
 13 |     // common
 14 |     ['m-range-border', 'border-2 border-primary border-solid'],
 15 |     // classes
 16 |     ['m-range', 'min-h-1 min-w-1 box-content'],
 17 |     // theme
 18 |     ['m-range-theme', '[--c-primary:#409EFF] [--c-fill:#E4E7ED] [--c-fill-stop:#F5F5F5] [--c-fill-thumb:#fff] [--c-drop:var(--c-primary)]'],
 19 |     ['m-range-theme-dark', '[--c-primary:#3070ED] [--c-fill:#444] [--c-fill-stop:#555] [--c-fill-thumb:#333] [--c-drop:var(--c-primary)]'],
 20 |     // track
 21 |     ['m-range-small', 'h2 [--m-range-h:0.5rem]'],
 22 |     ['m-range-medium', 'h4 [--m-range-h:1rem]'],
 23 |     ['m-range-large', 'h8 [--m-range-h:2rem]'],
 24 |     ['m-range-track', 'relative h-full bg-fill select-none rd-full'],
 25 |     ['m-range-v-small', 'w2 [--m-range-w:0.5rem]'],
 26 |     ['m-range-v-medium', 'w4 [--m-range-w:1rem]'],
 27 |     ['m-range-v-large', 'w8 [--m-range-w:2rem]'],
 28 |     ['m-range-v-track', 'relative w-full h-full bg-fill select-none rd-full'],
 29 |     // highlight
 30 |     ['m-range-highlight-container', 'absolute h-full w-full overflow-hidden rd-inherit'],
 31 |     ['m-range-highlight', 'h-full bg-primary absolute'],
 32 |     ['m-range-v-highlight', 'w-full bg-primary absolute'],
 33 |     // progress
 34 |     ['m-range-progress-container', 'absolute h-full w-full overflow-hidden rd-inherit'],
 35 |     ['m-range-progress', 'h-full bg-primary absolute'],
 36 |     ['m-range-v-progress', 'w-full bg-primary absolute'],
 37 |     // points
 38 |     ['m-range-points-area', 'absolute h-full w-full rd-inherit overflow-hidden'],
 39 |     ['m-range-points-container', 'absolute h-full left--3px right--3px flex justify-between items-center'],
 40 |     ['m-range-points', 'w-6px h-6px rd-3px bg-fill-stop'],
 41 |     ['m-range-v-points-container', 'absolute w-full top--3px bottom--3px flex flex-col justify-between items-center'],
 42 |     // marks
 43 |     ['m-range-marks', 'absolute h-full w-full left-0 top-0 translate-y-[calc(var(--m-range-h)_+_var(--m-range-thumb-h))]'],
 44 |     ['m-range-mark-item', 'absolute top-0 translate-x--50%'],
 45 |     ['m-range-v-marks', 'absolute h-full w-full left-0 top-0 translate-x-[calc(var(--m-range-w)_+_var(--m-range-thumb-w))]'],
 46 |     ['m-range-v-mark-item', 'absolute left-0 translate-y--50%'],
 47 |     // thumb
 48 |     ['m-range-thumb', 'm-range-border touch-none absolute bg-fill-thumb translate-x--50% transform-origin-center transition transition-property-[opacity,transform]'],
 49 |     ['m-range-thumb-circle', 'w-[calc(var(--m-range-h)_+_var(--m-range-thumb-h)_*_2)] rd-full'],
 50 |     ['m-range-thumb-square', 'w-[calc(var(--m-range-h)_+_var(--m-range-thumb-h)_*_2)]'],
 51 |     ['m-range-thumb-rect', 'w3 rd-full'],
 52 |     ['m-range-thumb-small', 'top--0 bottom--0 [--m-range-thumb-h:0rem]'],
 53 |     ['m-range-thumb-medium', 'top--1 bottom--1 [--m-range-thumb-h:0.25rem]'],
 54 |     ['m-range-thumb-large', 'top--2 bottom--2 [--m-range-thumb-h:0.5rem]'],
 55 |     ['m-range-thumb-active', 'z-1  drop-shadow-[0.1rem_0.15rem_0.25rem_var(--c-drop)]'],
 56 |     ['m-range-transition-container', 'absolute h-full w0 left-50%'],
 57 |     ['m-range-thumb-top-container', 'absolute left-50% top-0 translate-x--50% translate-y-[calc(-100%_-_4px)]'],
 58 |     ['m-range-thumb-bottom-container', 'absolute left-50% bottom-0 translate-x--50% translate-y-[calc(100%_+_4px)]'],
 59 |     ['m-range-v-thumb', 'm-range-border touch-none absolute bg-fill-thumb translate-y--50% transform-origin-center transition transition-property-[opacity,transform]'],
 60 |     ['m-range-v-thumb-circle', 'h-[calc(var(--m-range-w)_+_var(--m-range-thumb-w)_*_2)] rd-full'],
 61 |     ['m-range-v-thumb-square', 'h-[calc(var(--m-range-w)_+_var(--m-range-thumb-w)_*_2)]'],
 62 |     ['m-range-v-thumb-rect', 'h3 rd-full'],
 63 |     ['m-range-v-thumb-small', 'left--0 right--0 [--m-range-thumb-w:0rem]'],
 64 |     ['m-range-v-thumb-medium', 'left--1 right--1 [--m-range-thumb-w:0.25rem]'],
 65 |     ['m-range-v-thumb-large', 'left--2 right--2 [--m-range-thumb-w:0.5rem]'],
 66 |     ['m-range-v-transition-container', 'absolute w-full h0 top-50%'],
 67 |     ['m-range-v-thumb-top-container', 'absolute top-50% left-0 translate-y--50% translate-x-[calc(-100%_-_4px)]'],
 68 |     ['m-range-v-thumb-bottom-container', 'absolute top-50% right-0 translate-y--50% translate-x-[calc(100%_+_4px)]'],
 69 |   ],
 70 |   theme: {
 71 |     colors: {
 72 |       fill: {
 73 |         DEFAULT: 'var(--c-fill)',
 74 |         stop: 'var(--c-fill-stop)',
 75 |         thumb: 'var(--c-fill-thumb)',
 76 |       },
 77 |       drop: 'var(--c-drop)',
 78 |       primary: 'var(--c-primary)',
 79 |     },
 80 |   },
 81 |   safelist: [
 82 |     ...['small', 'medium', 'large'].flatMap(size => [`m-range-${size}`, `m-range-v-${size}`]),
 83 |     ...['circle', 'square', 'rect'].flatMap(size => [`m-range-thumb-${size}`, `m-range-v-thumb-${size}`]),
 84 |     ...['small', 'medium', 'large'].flatMap(size => [`m-range-thumb-${size}`, `m-range-v-thumb-${size}`]),
 85 |   ],
 86 |   presets: [
 87 |     presetWind3(),
 88 |     presetAttributify(),
 89 |     presetIcons({
 90 |       scale: 1.2,
 91 |       warn: true,
 92 |     }),
 93 |     presetTypography(),
 94 |   ],
 95 |   transformers: [
 96 |     transformerDirectives(),
 97 |     transformerVariantGroup(),
 98 |   ],
 99 |   rules: [
100 |   ],
101 | })
102 | 


--------------------------------------------------------------------------------
/src/RangeThumb.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup generic="T = any, U = RangeValueType<T>">
  2 | import type { RangeData, RangeRenderFn, RangeValueType } from './type'
  3 | import { computed, inject, nextTick, ref } from 'vue'
  4 | import { RangeTrackRefKey } from './Range'
  5 | import Render from './Render.vue'
  6 | 
  7 | const props = defineProps<{
  8 |   position: number
  9 |   data: RangeData<T, U>
 10 |   modelType: 'number' | 'data' | 'numberList' | 'dataList'
 11 |   active?: boolean
 12 |   disabled?: boolean
 13 |   unremovable?: boolean
 14 |   vertical?: boolean
 15 |   addable?: boolean
 16 |   thumbLimits?: [number, number]
 17 |   thumbType?: 'circle' | 'square' | 'rect'
 18 |   thumbSize?: 'small' | 'medium' | 'large'
 19 |   renderTop?: RangeRenderFn<T, U>
 20 |   renderTopOnActive?: boolean
 21 |   renderBottom?: RangeRenderFn<T, U>
 22 |   renderBottomOnActive?: boolean
 23 | }>()
 24 | 
 25 | const emits = defineEmits<{
 26 |   (e: 'update', percent: number): void
 27 |   (e: 'delete'): void
 28 |   (e: 'deleting'): void
 29 |   (e: 'cancelDelete'): void
 30 |   (e: 'moveDone'): void
 31 |   (e: 'change'): void
 32 | }>()
 33 | 
 34 | defineSlots<{
 35 |   top: (props: { data: U }) => any
 36 |   bottom: (props: { data: U }) => any
 37 | }>()
 38 | 
 39 | const thumbRef = ref<HTMLElement>()
 40 | const trackRef = inject(RangeTrackRefKey)
 41 | 
 42 | const removable = computed(() => props.addable && !props.unremovable)
 43 | const cursor = computed(() => props.disabled ? 'cursor-not-allowed' : removable.value ? 'cursor-move' : props.vertical ? 'cursor-ns-resize' : 'cursor-ew-resize')
 44 | 
 45 | const deleting = ref(false)
 46 | 
 47 | let moved = false
 48 | 
 49 | function setTrackCursor(cursor: string | undefined) {
 50 |   if (!trackRef?.value)
 51 |     return
 52 |   if (cursor)
 53 |     trackRef.value.style.cursor = cursor.slice('cursor-'.length)
 54 |   else
 55 |     trackRef.value.style.removeProperty('cursor')
 56 | }
 57 | 
 58 | function shouldDelete(offset: number) {
 59 |   if (!trackRef?.value)
 60 |     return false
 61 |   const trackRect = trackRef.value.getBoundingClientRect()
 62 |   if (props.vertical) {
 63 |     const left = trackRect.left - 32
 64 |     const right = trackRect.right + 32
 65 |     return offset < left || offset > right
 66 |   }
 67 |   else {
 68 |     const top = trackRect.top - 32
 69 |     const bottom = trackRect.bottom + 32
 70 |     return offset < top || offset > bottom
 71 |   }
 72 | }
 73 | 
 74 | function onPointerMove(e: PointerEvent) {
 75 |   if (!thumbRef.value || !trackRef?.value || props.disabled)
 76 |     return
 77 |   moved = true
 78 |   const trackRect = trackRef.value.getBoundingClientRect()
 79 |   const offset = props.vertical ? e.clientY - trackRect.top : e.clientX - trackRect.left
 80 |   const percent = offset / (props.vertical ? trackRect.height : trackRect.width) * 100
 81 |   if (percent < 0)
 82 |     emits('update', 0)
 83 |   else if (percent > 100)
 84 |     emits('update', 100)
 85 |   else if (!Number.isNaN(percent))
 86 |     emits('update', percent)
 87 |   if (removable.value)
 88 |     deleting.value = shouldDelete(props.vertical ? e.clientX : e.clientY)
 89 | }
 90 | 
 91 | function onPointerUp(e: PointerEvent) {
 92 |   window.removeEventListener('pointermove', onPointerMove)
 93 |   window.removeEventListener('pointerup', onPointerUp)
 94 |   window.removeEventListener('pointercancel', onPointerUp)
 95 |   if (moved) {
 96 |     emits('change')
 97 |     moved = false
 98 |   }
 99 |   if (e.type === 'pointercancel' || props.disabled) {
100 |     setTrackCursor(undefined)
101 |     emits('moveDone')
102 |     return
103 |   }
104 |   if (removable.value) {
105 |     if (shouldDelete(props.vertical ? e.clientX : e.clientY)) {
106 |       deleting.value = false
107 |       emits('delete')
108 |     }
109 |   }
110 |   setTrackCursor(undefined)
111 |   emits('moveDone')
112 | }
113 | 
114 | async function onPointerDown(e: PointerEvent) {
115 |   e.preventDefault()
116 |   e.stopPropagation()
117 |   if (e.target !== thumbRef.value) {
118 |     await nextTick()
119 |     emits('moveDone')
120 |     return
121 |   }
122 |   setTrackCursor(cursor.value)
123 |   moved = false
124 |   window.addEventListener('pointermove', onPointerMove, { passive: false })
125 |   window.addEventListener('pointerup', onPointerUp)
126 |   window.addEventListener('pointercancel', onPointerUp)
127 | }
128 | </script>
129 | 
130 | <template>
131 |   <div
132 |     ref="thumbRef"
133 |     :class="[
134 |       vertical ? 'm-range-v-thumb' : 'm-range-thumb',
135 |       {
136 |         'm-range-thumb-active': active,
137 |         'op-20': removable && deleting && active,
138 |       },
139 |       cursor,
140 |       `m-range-${vertical ? 'v-' : ''}thumb-${thumbType}`,
141 |       `m-range-${vertical ? 'v-' : ''}thumb-${thumbSize}`,
142 |     ]"
143 |     :style="vertical ? { top: `${position}%` } : { left: `${position}%` }"
144 |     @pointerdown="onPointerDown"
145 |   >
146 |     <Transition name="fade">
147 |       <div v-if="!renderTopOnActive || active" class="cursor-default" :class="vertical ? 'm-range-v-transition-container' : 'm-range-transition-container'">
148 |         <div :class="vertical ? 'm-range-v-thumb-top-container' : 'm-range-thumb-top-container'">
149 |           <Render v-if="renderTop" :render="() => renderTop?.((['data', 'dataList'].includes(modelType) ? data : data.value) as U)" />
150 |           <slot v-else name="top" :data="(['data', 'dataList'].includes(modelType) ? data : data.value) as U" />
151 |         </div>
152 |       </div>
153 |     </Transition>
154 |     <Transition name="fade">
155 |       <div v-if="!renderBottomOnActive || active" class="cursor-default" :class="vertical ? 'm-range-v-transition-container' : 'm-range-transition-container'">
156 |         <div :class="vertical ? 'm-range-v-thumb-bottom-container' : 'm-range-thumb-bottom-container'">
157 |           <Render v-if="renderBottom" :render="() => renderBottom?.((['data', 'dataList'].includes(modelType) ? data : data.value) as U)" />
158 |           <slot v-else name="bottom" :data="(['data', 'dataList'].includes(modelType) ? data : data.value) as U" />
159 |         </div>
160 |       </div>
161 |     </Transition>
162 |   </div>
163 | </template>
164 | 
165 | <style scoped>
166 | .fade-enter-active {
167 |   animation: fade 0.3s;
168 | }
169 | 
170 | .fade-leave-active {
171 |   animation: fade 0.3s reverse;
172 | }
173 | 
174 | @keyframes fade {
175 |   from {
176 |     opacity: 0;
177 |     transform: scale(0.5);
178 |   }
179 | 
180 |   to {
181 |     opacity: 1;
182 |     transform: scale(1);
183 |   }
184 | }
185 | </style>
186 | 


--------------------------------------------------------------------------------
/test/range.test.ts:
--------------------------------------------------------------------------------
  1 | import type { RangeData } from '../src/type'
  2 | import { mount } from '@vue/test-utils'
  3 | import { describe, expect, it, vi } from 'vitest'
  4 | import { h, nextTick, ref } from 'vue'
  5 | import { Range } from '../src/index'
  6 | import { PromiseTimeout } from '../src/utils'
  7 | 
  8 | describe('range', () => {
  9 |   it('should created a range', () => {
 10 |     const wrapper = mount(Range, {
 11 |       props: { modelValue: 0 },
 12 |     })
 13 |     expect(wrapper.props().modelValue).toEqual(0)
 14 |     expect(wrapper.find('.m-range-thumb').exists()).toBe(true)
 15 |   })
 16 | 
 17 |   it('should not have thumb while modelValue is undefined', () => {
 18 |     const wrapper = mount(Range)
 19 |     expect(wrapper.find('.m-range-thumb').exists()).toBe(false)
 20 |   })
 21 | 
 22 |   it('should be vertical', () => {
 23 |     const wrapper = mount(Range, {
 24 |       props: { modelValue: 0, vertical: true, max: 10, marks: { 0: '1' } },
 25 |     })
 26 |     expect(wrapper.find('.m-range-v-small').exists()).toBe(true)
 27 |     expect(wrapper.find('.m-range-v-track').exists()).toBe(true)
 28 |     expect(wrapper.find('.m-range-v-highlight').exists()).toBe(true)
 29 |     expect(wrapper.find('.m-range-v-points-container').exists()).toBe(true)
 30 |     expect(wrapper.find('.m-range-v-marks').exists()).toBe(true)
 31 |     expect(wrapper.find('.m-range-v-mark-item').exists()).toBe(true)
 32 |     expect(wrapper.find('.m-range-v-thumb').exists()).toBe(true)
 33 |     expect(wrapper.find('.m-range-v-thumb-circle').exists()).toBe(true)
 34 |     expect(wrapper.find('.m-range-v-thumb-medium').exists()).toBe(true)
 35 |     expect(wrapper.find('.m-range-v-transition-container').exists()).toBe(true)
 36 |     expect(wrapper.find('.m-range-v-thumb-top-container').exists()).toBe(true)
 37 |     expect(wrapper.find('.m-range-v-thumb-bottom-container').exists()).toBe(true)
 38 |   })
 39 | 
 40 |   it('should show stops', () => {
 41 |     const wrapper = mount(Range, {
 42 |       props: { modelValue: 0, min: 0, max: 100, step: 10 },
 43 |     })
 44 |     expect(wrapper.find('.m-range-points').exists()).toBe(true)
 45 |   })
 46 | 
 47 |   it('should not show stops', () => {
 48 |     const wrapper = mount(Range, {
 49 |       props: { modelValue: 0, min: 0, max: 10, step: 1, showStops: 10 },
 50 |     })
 51 |     expect(wrapper.find('.m-range-points').exists()).toBe(false)
 52 |   })
 53 | 
 54 |   it('should work with size, thumbSize, thumbType', () => {
 55 |     const wrapper = mount(Range, {
 56 |       props: { modelValue: 0, size: 'large', thumbSize: 'small', thumbType: 'rect' },
 57 |     })
 58 |     expect(wrapper.find('.m-range-large').exists()).toBe(true)
 59 |     expect(wrapper.find('.m-range-thumb-small').exists()).toBe(true)
 60 |     expect(wrapper.find('.m-range-thumb-rect').exists()).toBe(true)
 61 |   })
 62 | 
 63 |   it('should work with render function', () => {
 64 |     const wrapper = mount(Range, {
 65 |       props: {
 66 |         modelValue: [0, 1],
 67 |         renderTop: value => h('p', { class: 'top-render' }, String(value)),
 68 |         renderBottom: value => h('p', { class: 'bottom-render' }, String(value)),
 69 |       },
 70 |     })
 71 |     expect(wrapper.find('p.top-render').exists()).toBe(true)
 72 |     expect(wrapper.find('p.bottom-render').exists()).toBe(true)
 73 |   })
 74 | 
 75 |   it('should work with render on active', async () => {
 76 |     const wrapper = mount(Range, {
 77 |       props: {
 78 |         modelValue: [0, 1],
 79 |         renderTop: value => h('p', { class: 'top-render' }, String(value)),
 80 |         renderTopOnActive: true,
 81 |         renderBottom: value => h('p', { class: 'bottom-render' }, String(value)),
 82 |         renderBottomOnActive: true,
 83 |       },
 84 |     })
 85 |     expect(wrapper.find('p.top-render').exists()).toBe(false)
 86 |     expect(wrapper.find('p.bottom-render').exists()).toBe(false)
 87 |     const thumb = wrapper.findComponent({ name: 'RangeThumb' })
 88 |     await thumb.trigger('pointerdown', { clientX: 0 })
 89 |     expect(wrapper.find('p.top-render').exists()).toBe(true)
 90 |     expect(wrapper.find('p.bottom-render').exists()).toBe(true)
 91 |   })
 92 | 
 93 |   it('should work with marks', () => {
 94 |     const wrapper = mount(Range, {
 95 |       props: { modelValue: 0, marks: { 0: '1' } },
 96 |     })
 97 |     expect(wrapper.find('.m-range-mark-item').exists()).toBe(true)
 98 |   })
 99 | 
100 |   it('should work with drag', async () => {
101 |     const model = ref(0)
102 |     const wrapper = mount(Range, {
103 |       props: { modelValue: model, style: 'width:200px' },
104 |       attachTo: document.getElementById('app') || document.body,
105 |     })
106 |     const track = wrapper.find('.m-range-track')
107 |     // @ts-expect-error no mock of getBoundingClientRect
108 |     vi.spyOn(track.element, 'getBoundingClientRect', 'get').mockImplementation(() => () => ({ left: 0, top: 0, width: 200, height: 200 }))
109 |     const thumb = wrapper.findComponent({ name: 'RangeThumb' })
110 |     thumb.trigger('pointerdown', { clientX: 0 })
111 | 
112 |     const mousemove = new MouseEvent('pointermove', {
113 |       screenX: 100,
114 |       screenY: 0,
115 |       clientX: 100,
116 |       clientY: 0,
117 |     })
118 |     window.dispatchEvent(mousemove)
119 |     await nextTick()
120 |     expect(model.value).toBe(50)
121 | 
122 |     const mouseup = new MouseEvent('pointerup', {
123 |       screenX: 100,
124 |       screenY: 0,
125 |       clientX: 100,
126 |       clientY: 0,
127 |     })
128 |     window.dispatchEvent(mouseup)
129 |     await nextTick()
130 |     expect(model.value).toBe(50)
131 |   })
132 | 
133 |   it('should work with outside model value change', async () => {
134 |     const model = ref<RangeData<number>[]>(Array.from({ length: 10 }, (_, i) => ({
135 |       value: i * 10,
136 |       data: i,
137 |     })))
138 |     mount(Range, {
139 |       props: {
140 |         modelValue: model,
141 |       },
142 |     })
143 |     model.value.splice(5, 1)
144 |     await PromiseTimeout(10)
145 |     expect(model.value).toMatchInlineSnapshot(`
146 |       [
147 |         {
148 |           "data": 0,
149 |           "value": 0,
150 |         },
151 |         {
152 |           "data": 1,
153 |           "value": 10,
154 |         },
155 |         {
156 |           "data": 2,
157 |           "value": 20,
158 |         },
159 |         {
160 |           "data": 3,
161 |           "value": 30,
162 |         },
163 |         {
164 |           "data": 4,
165 |           "value": 40,
166 |         },
167 |         {
168 |           "data": 6,
169 |           "value": 60,
170 |         },
171 |         {
172 |           "data": 7,
173 |           "value": 70,
174 |         },
175 |         {
176 |           "data": 8,
177 |           "value": 80,
178 |         },
179 |         {
180 |           "data": 9,
181 |           "value": 90,
182 |         },
183 |       ]
184 |     `)
185 |   })
186 | })
187 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue Range Multi
  2 | 
  3 | [![npm version][npm-version-src]][npm-version-href]
  4 | [![npm downloads][npm-downloads-src]][npm-downloads-href]
  5 | [![bundle][bundle-src]][bundle-href]
  6 | [![JSDocs][jsdocs-src]][jsdocs-href]
  7 | [![License][license-src]][license-href]
  8 | 
  9 | <a href="https://range.wiidede.space/" target="_blank" >
 10 | <img alt="Vue Range Multi Logo" src="./playground/public/favicon.svg" width="100px" height="100px">
 11 | </a>
 12 | 
 13 | A Vue range(slider) component that supports one or more thumb
 14 | 
 15 | - ✨ Support for one or more thumbs.
 16 | - 🔄 Auto-detect the type of model and display the corresponding thumb(s).
 17 | - 🔀 Automatically sort the model values without sorting the DOM.
 18 | - ➕ Ability to add or remove thumbs dynamically.
 19 | - 🚫 Avoid duplicate thumbs by rejecting them.
 20 | - 🍡 Smooth movement or jump movement over the stops.
 21 | - 🎨 Customizable style and theme.
 22 | - 🌓 Supports dark mode.
 23 | - 📍 Render content above or below the thumb(render function / slot).
 24 | - 🏷 Support display marks under the track.
 25 | 
 26 | ## Demo
 27 | 
 28 | [Demo](https://range.wiidede.space/)
 29 | 
 30 | ## Quick Start
 31 | 
 32 | 1. Install
 33 | 
 34 | ```bash
 35 | pnpm add vue-range-multi
 36 | ```
 37 | 
 38 | 2. Use in Vue
 39 | 
 40 | in SFC
 41 | 
 42 | ```vue
 43 | <script setup lang="ts">
 44 | import { ref } from 'vue'
 45 | import { Range } from 'vue-range-multi'
 46 | import 'vue-range-multi/style.css'
 47 | 
 48 | const model = ref<number>(0)
 49 | </script>
 50 | 
 51 | <template>
 52 |   <Range v-model="model" />
 53 | </template>
 54 | ```
 55 | 
 56 | install globally
 57 | 
 58 | ```ts
 59 | // main.ts
 60 | import { Range } from 'vue-range-multi'
 61 | import 'vue-range-multi/style.css'
 62 | 
 63 | app.component('MRange', Range)
 64 | ```
 65 | 
 66 | ```ts
 67 | declare module 'vue' {
 68 |   export interface GlobalComponents {
 69 |     MRange: typeof import('vue-range-multi')['Range']
 70 |   }
 71 | }
 72 | ```
 73 | 
 74 | unplugin-vue-components
 75 | 
 76 | ```ts
 77 | import { VueRangeMultiResolver } from 'vue-range-multi'
 78 | 
 79 | // and then add `VueRangeMultiResolver()` into resolvers
 80 | ```
 81 | 
 82 | ```ts
 83 | // type of options
 84 | interface VueRangeMultiResolverOptions {
 85 |   /**
 86 |    * The name of the component. It should always CapitalCase
 87 |    *
 88 |    * @default 'MRange'
 89 |    */
 90 |   name?: string
 91 | }
 92 | ```
 93 | 
 94 | ## Props
 95 | 
 96 | > [!NOTE]
 97 | > After v0.4, `marks`'s key means value rather than percentage
 98 | 
 99 | generic="T = any, U = number | RangeData\<T>"
100 | 
101 | | Name                 | Type                               | Description                                                                                                                                                    | Default            |
102 | | -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
103 | | v-model:modelValue\* | U \ U[]                            | Model value. It will automatically detect the type of model and show the corresponding thumb(s)                                                                | []                 |
104 | | min                  | number                             | The minimum value allowed                                                                                                                                      | 0                  |
105 | | max                  | number                             | The maximum value allowed                                                                                                                                      | 100                |
106 | | step                 | number                             | Step                                                                                                                                                           | 1                  |
107 | | vertical             | boolean                            | Determines if the range is vertical. Note that it will generate new classes like 'm-range-v-xxx'                                                               | false              |
108 | | addable              | boolean                            | Determines if new data can be added/deleted. You can specify the data to be added by `addData` prop                                                            | false              |
109 | | 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          |
110 | | limit                | number                             | the limit can be add                                                                                                                                           | undefined          |
111 | | thumbLimits          | [number, number]                   | Global limit for all thumbs' movement range. Individual thumb can override this with its own limits property                                                   | undefined          |
112 | | smooth               | boolean                            | Determines if the thumb(s) should only be displayed on the stop points or not                                                                                  | false              |
113 | | deduplicate          | boolean                            | Determines if the thumb(s) can be duplicated                                                                                                                   | true               |
114 | | rangeHighlight       | boolean                            | Determines if the range between the minimum and maximum values should be highlighted.                                                                          | false              |
115 | | progress             | RangeProgress                      | Custom track highlight segment                                                                                                                                 | undefined          |
116 | | 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                 |
117 | | size                 | 'small' \| 'medium' \| 'large'     | Track size                                                                                                                                                     | 'small'            |
118 | | thumbType            | 'circle' \| 'square' \| 'rect'     | Thumb type(default 'rect' while size is 'large', otherwise 'small')                                                                                            | 'circle' \| 'rect' |
119 | | thumbSize            | 'small' \| 'medium' \| 'large'     | Thumb size                                                                                                                                                     | 'medium'           |
120 | | renderTop            | (data: U) => VNode                 | A render function for displaying content above the thumb                                                                                                       | undefined          |
121 | | renderTopOnActive    | boolean                            | Specifies whether to render only while the thumb is active                                                                                                     | false              |
122 | | renderBottom         | (data: U) => VNode                 | A render function for displaying content below the thumb                                                                                                       | undefined          |
123 | | renderBottomOnActive | boolean                            | Specifies whether to render only while the thumb is active                                                                                                     | false              |
124 | | marks                | RangeMarks                         | Show marks under the track                                                                                                                                     | undefined          |
125 | 
126 | ## Events
127 | 
128 | | Name   | Type                                                                 | Description                                                |
129 | | ------ | -------------------------------------------------------------------- | ---------------------------------------------------------- |
130 | | change | (value: RangeValue<T, U>, thumbValue: U, thumbIndex: number) => void | It will emit when thumb `pointerup` (after move the thumb) |
131 | 
132 | ## slots
133 | 
134 | | Name   | Type        | Description                                                         |
135 | | ------ | ----------- | ------------------------------------------------------------------- |
136 | | top    | { data: U } | render above the thumb, only effect while renderTop is undefined    |
137 | | bottom | { data: U } | render below the thumb, only effect while renderBottom is undefined |
138 | 
139 | ## types
140 | 
141 | ```ts
142 | export type RangeValueType<T> = number | RangeData<T>
143 | export interface RangeData<T, U = RangeValueType<T>> {
144 |   value: number
145 |   data?: T
146 |   disabled?: boolean
147 |   unremovable?: boolean
148 |   limits?: [number, number] // Min and max limits for this specific thumb
149 |   renderTop?: RangeRenderFn<T, U>
150 |   renderBottom?: RangeRenderFn<T, U>
151 | }
152 | export type RangeRenderFn<T, U = RangeValueType<T>> = (data: U) => VNode
153 | export type RangeValue<T, U = RangeValueType<T>> = U | U[]
154 | export type RangeProgress = ([number, number] | {
155 |   range: [number, number]
156 |   style?: CSSProperties
157 |   class?: string
158 | })[]
159 | export type RangeMarks = Record<number, string | {
160 |   label: string
161 |   style?: CSSProperties
162 |   class?: string
163 | }>
164 | ```
165 | 
166 | ## theme
167 | 
168 | If you want to customize the theme, just use CSS variables to override the default theme.
169 | 
170 | ```css
171 | .m-range-theme {
172 |   --c-primary: #409eff; /* primary color */
173 |   --c-fill: #e4e7ed; /* track's fill color */
174 |   --c-fill-stop: #f5f5f5; /* stop's fill color */
175 |   --c-fill-thumb: #fff; /* thumb's fill color */
176 | }
177 | ```
178 | 
179 | ## License
180 | 
181 | [MIT](./LICENSE) License © 2023-PRESENT [wiidede](https://github.com/wiidede)
182 | 
183 | <!-- Badges -->
184 | 
185 | [npm-version-src]: https://img.shields.io/npm/v/vue-range-multi?style=flat&colorA=080f12&colorB=1fa669
186 | [npm-version-href]: https://npmjs.com/package/vue-range-multi
187 | [npm-downloads-src]: https://img.shields.io/npm/dm/vue-range-multi?style=flat&colorA=080f12&colorB=1fa669
188 | [npm-downloads-href]: https://npmjs.com/package/vue-range-multi
189 | [bundle-src]: https://img.shields.io/bundlephobia/minzip/vue-range-multi?style=flat&colorA=080f12&colorB=1fa669&label=minzip
190 | [bundle-href]: https://bundlephobia.com/result?p=vue-range-multi
191 | [license-src]: https://img.shields.io/github/license/wiidede/vue-range-multi.svg?style=flat&colorA=080f12&colorB=1fa669
192 | [license-href]: https://github.com/wiidede/vue-range-multi/blob/main/LICENSE
193 | [jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
194 | [jsdocs-href]: https://www.jsdocs.io/package/vue-range-multi
195 | 


--------------------------------------------------------------------------------
/src/Range.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup generic="T = any, U = RangeValueType<T>">
  2 | import type { RangeData, RangeMarks, RangeProgress, RangeRenderFn, RangeValue, RangeValueType } from './type'
  3 | import { computed, nextTick, provide, ref, watch } from 'vue'
  4 | import { RangeTrackRefKey } from './Range'
  5 | import RangeThumb from './RangeThumb.vue'
  6 | import { percentage2value, swap, value2percentage } from './utils'
  7 | 
  8 | const props = withDefaults(defineProps<{
  9 |   // eslint-disable-next-line vue/no-required-prop-with-default
 10 |   modelValue: RangeValue<T, U>
 11 |   min?: number
 12 |   max?: number
 13 |   step?: number
 14 |   vertical?: boolean
 15 |   thumbLimits?: [number, number]
 16 |   addable?: boolean
 17 |   addData?: (value: number) => RangeData<T, U>
 18 |   limit?: number
 19 |   smooth?: boolean
 20 |   deduplicate?: boolean
 21 |   rangeHighlight?: boolean
 22 |   progress?: RangeProgress
 23 |   showStops?: boolean | number
 24 |   size?: 'small' | 'medium' | 'large'
 25 |   thumbType?: 'circle' | 'square' | 'rect'
 26 |   thumbSize?: 'small' | 'medium' | 'large'
 27 |   renderTop?: RangeRenderFn<T, U>
 28 |   renderTopOnActive?: boolean
 29 |   renderBottom?: RangeRenderFn<T, U>
 30 |   renderBottomOnActive?: boolean
 31 |   marks?: RangeMarks
 32 | }>(), {
 33 |   modelValue: () => [],
 34 |   min: 0,
 35 |   max: 100,
 36 |   step: 1,
 37 |   deduplicate: true,
 38 |   showStops: 12,
 39 |   size: 'small',
 40 |   thumbSize: 'medium',
 41 | })
 42 | 
 43 | const emits = defineEmits<{
 44 |   (e: 'update:modelValue', modelValue: typeof props.modelValue): void
 45 |   (e: 'change', value: RangeValue<T, U>, thumbValue: U, thumbIndex: number): void
 46 | }>()
 47 | 
 48 | defineSlots<{
 49 |   top?: (props: { data: U }) => any
 50 |   bottom?: (props: { data: U }) => any
 51 | }>()
 52 | 
 53 | const modelType = computed<'number' | 'data' | 'numberList' | 'dataList'>(() => {
 54 |   const value = props.modelValue
 55 |   if (Array.isArray(value) && typeof value[0] === 'number')
 56 |     return 'numberList'
 57 |   else if (Array.isArray(value))
 58 |     return 'dataList'
 59 |   else if (typeof value === 'number')
 60 |     return 'number'
 61 |   else if (typeof value === 'object')
 62 |     return 'data'
 63 |   else
 64 |     console.warn('[vue-range-multi]: modelValue type not support', value)
 65 |   return 'number'
 66 | })
 67 | const model = computed<RangeData<T, U>[]>({
 68 |   get: () => {
 69 |     const value = props.modelValue
 70 |     if (Array.isArray(value))
 71 |       return value.map(item => typeof item === 'number' ? { value: (item as number) } : (item as RangeData<T, U>))
 72 |     else
 73 |       return [typeof value === 'number' ? { value: (value as number) } : (value as RangeData<T, U>)]
 74 |   },
 75 |   set: (value) => {
 76 |     let res: any
 77 |     if (modelType.value === 'number')
 78 |       res = value[0].value
 79 |     else if (modelType.value === 'data')
 80 |       res = value[0]
 81 |     else if (modelType.value === 'numberList')
 82 |       res = value.map(item => (item.value))
 83 |     else
 84 |       res = value
 85 |     emits('update:modelValue', res)
 86 |   },
 87 | })
 88 | 
 89 | const allowAdd = computed(() =>
 90 |   props.addable
 91 |   && (!props.limit || model.value.length < props.limit)
 92 |   && !['data', 'number'].includes(modelType.value),
 93 | )
 94 | 
 95 | const stops = computed(() => {
 96 |   const stops = Math.floor((props.max - props.min) / props.step) + 1
 97 |   if (props.showStops === true)
 98 |     return stops
 99 |   else if (typeof props.showStops === 'number')
100 |     return stops > props.showStops ? -1 : stops
101 |   else
102 |     return -1
103 | })
104 | 
105 | // {idx: index} - idx is the real dom of thumb's index, index is the index in model
106 | const indexMap = ref<Record<number, number>>({})
107 | const indexMapReversed = computed(() => Object.fromEntries(Object.entries(indexMap.value).map(([k, v]) => [v, Number.parseInt(k)])))
108 | 
109 | function sort(val: RangeData<T, U>[]) {
110 |   const valMap = val.map((v, i) => ({ v: v.value, i, raw: v }))
111 |   valMap.sort((a, b) => a.v - b.v)
112 |   const changed = valMap.some((v, i) => v.i !== i)
113 |   if (!changed)
114 |     return
115 |   const sortMap = Object.fromEntries(valMap.map((v, i) => [v.i, i]))
116 |   indexMap.value = Object.fromEntries(Object.entries(indexMap.value).map(([k, v]) => [k, sortMap[v]]))
117 |   nextTick(() => model.value = valMap.map(v => v.raw))
118 | }
119 | function getAddableIndex(arr: number[]) {
120 |   [...arr].sort()
121 |   let i = 0
122 |   for (; i < arr.length; i++) {
123 |     if (i !== arr[i])
124 |       return i
125 |   }
126 |   return i
127 | }
128 | watch(model, (val) => {
129 |   const length = Object.keys(indexMap.value).length
130 |   if (val.length > length) {
131 |     for (let i = length; i < val.length; i++)
132 |       indexMap.value[getAddableIndex(Object.keys(indexMap.value).map(key => Number.parseInt(key)))] = i
133 |     sort(val)
134 |   }
135 |   else if (val.length < length) {
136 |     for (let i = length - 1; i >= val.length; i -= 1) {
137 |       const index = indexMapReversed.value[i]
138 |       delete indexMap.value[index]
139 |     }
140 |     sort(val)
141 |   }
142 | }, {
143 |   immediate: true,
144 | })
145 | 
146 | const trackRef = ref<HTMLElement>()
147 | 
148 | function getValue(percentage: number) {
149 |   return percentage2value(percentage, props.min, props.max, props.step)
150 | }
151 | function getPercentage(value: number) {
152 |   return value2percentage(value, props.min, props.max, props.step)
153 | }
154 | 
155 | const current = ref<number>(-1)
156 | const currentPercentage = ref<number>(-1)
157 | let currentPercentageTimer: number
158 | function setCurrentPercentage(val: number) {
159 |   currentPercentage.value = val
160 |   clearTimeout(currentPercentageTimer)
161 |   currentPercentageTimer = window.setTimeout(() => {
162 |     currentPercentage.value = -1
163 |   }, 300)
164 | }
165 | const position = computed(() => Object.fromEntries(Object.entries(indexMap.value).map(
166 |   ([idx, index]) => (props.smooth && current.value === Number.parseInt(idx) && currentPercentage.value > -1)
167 |     ? [idx, currentPercentage.value]
168 |     : [idx, getPercentage(model.value[index].value)],
169 | )))
170 | 
171 | function onUpdate(percentage: number) {
172 |   setCurrentPercentage(percentage)
173 |   const value = getValue(percentage)
174 |   const modelValue = model.value
175 |   const values = modelValue.map(i => i.value)
176 |   if (props.deduplicate && values.includes(value))
177 |     return
178 |   let index = indexMap.value[current.value]
179 |   const oldValue = values[index]
180 | 
181 |   // Apply limits if they exist
182 |   const thumbData = modelValue[index]
183 | 
184 |   // Check individual thumb limits first, then global limits
185 |   const individualLimits = thumbData.limits
186 |   const globalLimits = props.thumbLimits
187 | 
188 |   if (individualLimits) {
189 |     if (value < individualLimits[0] || value > individualLimits[1])
190 |       return
191 |   }
192 |   else if (globalLimits) {
193 |     if (value < globalLimits[0] || value > globalLimits[1])
194 |       return
195 |   }
196 | 
197 |   if (oldValue - value > 0 && index > 0) {
198 |     for (let i = index; i > 0; i -= 1) {
199 |       const prev = values[i - 1]
200 |       if (value < prev) {
201 |         swap(modelValue, i, i - 1)
202 |         swap(indexMap.value, indexMapReversed.value[i], indexMapReversed.value[i - 1])
203 |         index -= 1
204 |       }
205 |     }
206 |   }
207 |   if (oldValue - value < 0 && index < modelValue.length - 1) {
208 |     for (let i = index; i < modelValue.length - 1; i++) {
209 |       const next = values[i + 1]
210 |       if (value > next) {
211 |         swap(modelValue, i, i + 1)
212 |         swap(indexMap.value, indexMapReversed.value[i], indexMapReversed.value[i + 1])
213 |         index += 1
214 |       }
215 |     }
216 |   }
217 |   modelValue[index].value = value
218 |   model.value = modelValue
219 | }
220 | 
221 | function onDelete() {
222 |   const valueIndex = indexMap.value[current.value]
223 |   const modelValue = model.value
224 |   modelValue.splice(valueIndex, 1)
225 |   model.value = modelValue
226 |   delete indexMap.value[current.value]
227 |   indexMap.value = Object.fromEntries(Object.entries(indexMap.value).map(([idx, index]) => index >= valueIndex ? [idx, index - 1] : [idx, index]))
228 | }
229 | 
230 | let addTiming = false
231 | function addThumb(e: MouseEvent) {
232 |   if (!addTiming)
233 |     return
234 |   addTiming = false
235 |   if (!trackRef?.value || !allowAdd.value)
236 |     return
237 |   const trackRect = trackRef.value.getBoundingClientRect()
238 |   const offset = props.vertical ? e.clientY - trackRect.top : e.clientX - trackRect.left
239 |   const percent = offset / (props.vertical ? trackRect.height : trackRect.width) * 100
240 |   const value = getValue(percent)
241 |   if (model.value.some(item => item.value === value))
242 |     return
243 |   const modelValue = model.value
244 |   if (modelType.value === 'numberList') {
245 |     modelValue.push({ value })
246 |     model.value = modelValue
247 |   }
248 |   else if (modelType.value === 'dataList') {
249 |     modelValue.push(props.addData ? props.addData(value) : { value })
250 |     model.value = modelValue
251 |   }
252 | }
253 | 
254 | provide(RangeTrackRefKey, trackRef)
255 | </script>
256 | 
257 | <template>
258 |   <div
259 |     class="dark:m-range-theme-dark m-range-theme m-range"
260 |     :class="[`m-range-${vertical ? 'v-' : ''}${size}`, `m-range-${vertical ? 'v-' : ''}thumb-${thumbSize}`]"
261 |   >
262 |     <div
263 |       ref="trackRef"
264 |       :class="[vertical ? 'm-range-v-track' : 'm-range-track', { 'cursor-copy': allowAdd }]"
265 |       @pointerdown="addTiming = true"
266 |       @pointerleave="addTiming = false"
267 |       @pointerup.prevent="addThumb"
268 |     >
269 |       <div v-show="rangeHighlight && model.length >= 2" class="m-range-highlight-container">
270 |         <div
271 |           :class="vertical ? 'm-range-v-highlight' : 'm-range-highlight'"
272 |           :style="vertical
273 |             ? { top: `${Math.min(...Object.values(position))}%`, bottom: `${100 - Math.max(...Object.values(position))}%` }
274 |             : { left: `${Math.min(...Object.values(position))}%`, right: `${100 - Math.max(...Object.values(position))}%` }"
275 |         />
276 |       </div>
277 |       <div v-if="progress?.length" class="m-range-progress-container">
278 |         <template v-for="bar, idx in progress" :key="idx">
279 |           <div
280 |             v-if="(Array.isArray(bar))"
281 |             :class="vertical ? 'm-range-v-progress' : 'm-range-progress'"
282 |             :style="vertical
283 |               ? { top: `${getPercentage(bar[0])}%`, bottom: `${100 - getPercentage(bar[1])}%` }
284 |               : { left: `${getPercentage(bar[0])}%`, right: `${100 - getPercentage(bar[1])}%` }"
285 |           />
286 |           <div
287 |             v-else
288 |             :class="[vertical ? 'm-range-v-progress' : 'm-range-progress', bar.class]"
289 |             :style="vertical
290 |               ? { top: `${getPercentage(bar.range[0])}%`, bottom: `${100 - getPercentage(bar.range[1])}%`, ...bar.style }
291 |               : { left: `${getPercentage(bar.range[0])}%`, right: `${100 - getPercentage(bar.range[1])}%`, ...bar.style }"
292 |           />
293 |         </template>
294 |       </div>
295 |       <div v-if="stops > 0" class="m-range-points-area">
296 |         <div :class="vertical ? 'm-range-v-points-container' : 'm-range-points-container'">
297 |           <div v-for="index in stops" :key="index" class="m-range-points" />
298 |         </div>
299 |       </div>
300 |       <div v-if="marks" :class="vertical ? 'm-range-v-marks' : 'm-range-marks'">
301 |         <template v-for="mark, key in marks" :key="key">
302 |           <div
303 |             v-if="(typeof mark === 'string')"
304 |             :class="vertical ? 'm-range-v-mark-item' : 'm-range-mark-item'"
305 |             :style="vertical ? { top: `${getPercentage(key)}%` } : { left: `${getPercentage(key)}%` }"
306 |           >
307 |             {{ mark }}
308 |           </div>
309 |           <div
310 |             v-else
311 |             :class="[vertical ? 'm-range-v-mark-item' : 'm-range-mark-item', mark.class]"
312 |             :style="vertical ? { top: `${getPercentage(key)}%` } : { left: `${getPercentage(key)}%`, ...mark.style }"
313 |           >
314 |             {{ mark.label }}
315 |           </div>
316 |         </template>
317 |       </div>
318 |       <RangeThumb
319 |         v-for="index, idx in indexMap"
320 |         :key="idx"
321 |         :position="position[idx] || 0"
322 |         :active="current === Number(idx)"
323 |         :disabled="model[index].disabled"
324 |         :unremovable="model[index].unremovable"
325 |         :data="model[index]"
326 |         :model-type="modelType"
327 |         :render-top="model[index].renderTop || renderTop"
328 |         :render-top-on-active="renderTopOnActive"
329 |         :render-bottom="model[index].renderBottom || renderBottom"
330 |         :render-bottom-on-active="renderBottomOnActive"
331 |         :vertical="vertical"
332 |         :addable="addable"
333 |         :thumb-limits="thumbLimits"
334 |         :thumb-type="thumbType || (size === 'large' ? 'rect' : 'circle')"
335 |         :thumb-size="thumbSize"
336 |         @move-done="current = -1"
337 |         @update="onUpdate"
338 |         @delete="onDelete"
339 |         @pointerdown="current = Number(idx)"
340 |         @change="emits('change', props.modelValue, Array.isArray(props.modelValue) ? props.modelValue[index] : props.modelValue, index)"
341 |       >
342 |         <template #top="{ data }">
343 |           <slot name="top" :data="data" />
344 |         </template>
345 |         <template #bottom="{ data }">
346 |           <slot name="bottom" :data="data" />
347 |         </template>
348 |       </RangeThumb>
349 |     </div>
350 |   </div>
351 | </template>
352 | 
353 | <style scoped>
354 | </style>
355 | 


--------------------------------------------------------------------------------