{"id":26362974,"url":"https://github.com/wiidede/vue-range-multi","last_synced_at":"2025-03-16T18:20:00.290Z","repository":{"id":199636053,"uuid":"702374110","full_name":"wiidede/vue-range-multi","owner":"wiidede","description":"A Vue range / slider component that supports one or more thumb","archived":false,"fork":false,"pushed_at":"2024-03-14T01:53:07.000Z","size":369,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-28T01:11:22.743Z","etag":null,"topics":["range","slider","vue","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://range.wiidede.space/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wiidede.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-09T07:45:48.000Z","updated_at":"2024-07-01T12:19:07.036Z","dependencies_parsed_at":"2023-10-17T09:03:00.175Z","dependency_job_id":"ffc1908c-37ab-48d6-a39a-e45e0a7bd9ef","html_url":"https://github.com/wiidede/vue-range-multi","commit_stats":null,"previous_names":["wiidede/vue-range-multi"],"tags_count":14,"template":false,"template_full_name":"antfu/starter-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiidede%2Fvue-range-multi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiidede%2Fvue-range-multi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiidede%2Fvue-range-multi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiidede%2Fvue-range-multi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wiidede","download_url":"https://codeload.github.com/wiidede/vue-range-multi/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243910756,"owners_count":20367545,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["range","slider","vue","vue3","vuejs"],"created_at":"2025-03-16T18:19:59.361Z","updated_at":"2025-03-16T18:20:00.283Z","avatar_url":"https://github.com/wiidede.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Range Multi\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![bundle][bundle-src]][bundle-href]\n[![JSDocs][jsdocs-src]][jsdocs-href]\n[![License][license-src]][license-href]\n\n\u003ca href=\"https://range.wiidede.space/\" target=\"_blank\" \u003e\n\u003cimg alt=\"Vue Range Multi Logo\" src=\"./playground/public/favicon.svg\" width=\"100px\" height=\"100px\"\u003e\n\u003c/a\u003e\n\nA Vue range(slider) component that supports one or more thumb\n\n- ✨ Support for one or more thumbs.\n- 🔄 Auto-detect the type of model and display the corresponding thumb(s).\n- 🔀 Automatically sort the model values without sorting the DOM.\n- ➕ Ability to add or remove thumbs dynamically.\n- 🚫 Avoid duplicate thumbs by rejecting them.\n- 🍡 Smooth movement or jump movement over the stops.\n- 🎨 Customizable style and theme.\n- 🌓 Supports dark mode.\n- 📍 Render content above or below the thumb(render function / slot).\n- 🏷 Support display marks under the track.\n\n## Demo\n\n[Demo](https://range.wiidede.space/)\n\n## Quick Start\n\n1. Install\n\n```bash\npnpm add vue-range-multi\n```\n\n2. Use in Vue\n\nin SFC\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport { Range } from 'vue-range-multi'\nimport 'vue-range-multi/style.css'\n\nconst model = ref\u003cnumber\u003e(0)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cRange v-model=\"model\" /\u003e\n\u003c/template\u003e\n```\n\ninstall globally\n\n```ts\n// main.ts\nimport { Range } from 'vue-range-multi'\nimport 'vue-range-multi/style.css'\n\napp.component('MRange', Range)\n```\n\n```ts\ndeclare module 'vue' {\n  export interface GlobalComponents {\n    MRange: typeof import('vue-range-multi')['Range']\n  }\n}\n```\n\nunplugin-vue-components\n\n```ts\nimport { VueRangeMultiResolver } from 'vue-range-multi'\n\n// and then add `VueRangeMultiResolver()` into resolvers\n```\n\n```ts\n// type of options\ninterface VueRangeMultiResolverOptions {\n  /**\n   * The name of the component. It should always CapitalCase\n   *\n   * @default 'MRange'\n   */\n  name?: string\n}\n```\n\n## Props\n\n\u003e [!NOTE]\n\u003e After v0.4, `marks`'s key means value rather than percentage\n\ngeneric=\"T = any, U = number | RangeData\\\u003cT\u003e\"\n\n| Name                 | Type                               | Description                                                                                                                                                    | Default            |\n| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |\n| v-model:modelValue\\* | U \\ U[]                            | Model value. It will automatically detect the type of model and show the corresponding thumb(s)                                                                | []                 |\n| min                  | number                             | The minimum value allowed                                                                                                                                      | 0                  |\n| max                  | number                             | The maximum value allowed                                                                                                                                      | 100                |\n| step                 | number                             | Step                                                                                                                                                           | 1                  |\n| vertical             | boolean                            | Determines if the range is vertical. Note that it will generate new classes like 'm-range-v-xxx'                                                               | false              |\n| addable              | boolean                            | Determines if new data can be added/deleted. You can specify the data to be added by `addData` prop                                                            | false              |\n| addData              | (value: number) =\u003e RangeData\u003cT, U\u003e | Data to be added. This will only effect while modelValue is RangeData[]. It will return { value } by default                                                   | undefined          |\n| limit                | number                             | the limit can be add                                                                                                                                           | undefined          |\n| smooth               | boolean                            | Determines if the thumb(s) should only be displayed on the stop points or not                                                                                  | false              |\n| deduplicate          | boolean                            | Determines if the thumb(s) can be duplicated                                                                                                                   | true               |\n| rangeHighlight       | boolean                            | Determines if the range between the minimum and maximum values should be highlighted.                                                                          | false              |\n| progress             | RangeProgress                      | Custom track highlight segment                                                                                                                                 | undefined          |\n| 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                 |\n| size                 | 'small' \\| 'medium' \\| 'large'     | Track size                                                                                                                                                     | 'small'            |\n| thumbType            | 'circle' \\| 'square' \\| 'rect'     | Thumb type(default 'rect' while size is 'large', otherwise 'small')                                                                                            | 'circle' \\| 'rect' |\n| thumbSize            | 'small' \\| 'medium' \\| 'large'     | Thumb size                                                                                                                                                     | 'medium'           |\n| renderTop            | (data: U) =\u003e VNode                 | A render function for displaying content above the thumb                                                                                                       | undefined          |\n| renderTopOnActive    | boolean                            | Specifies whether to render only while the thumb is active                                                                                                     | false              |\n| renderBottom         | (data: U) =\u003e VNode                 | A render function for displaying content below the thumb                                                                                                       | undefined          |\n| renderBottomOnActive | boolean                            | Specifies whether to render only while the thumb is active                                                                                                     | false              |\n| marks                | RangeMarks                         | Show marks under the track                                                                                                                                     | undefined          |\n\n## Events\n\n| Name   | Type                                                                 | Description                                                |\n| ------ | -------------------------------------------------------------------- | ---------------------------------------------------------- |\n| change | (value: RangeValue\u003cT, U\u003e, thumbValue: U, thumbIndex: number) =\u003e void | It will emit when thumb `pointerup` (after move the thumb) |\n\n## slots\n\n| Name   | Type        | Description                                                         |\n| ------ | ----------- | ------------------------------------------------------------------- |\n| top    | { data: U } | render above the thumb, only effect while renderTop is undefined    |\n| bottom | { data: U } | render below the thumb, only effect while renderBottom is undefined |\n\n## types\n\n```ts\nexport type RangeValueType\u003cT\u003e = number | RangeData\u003cT\u003e\nexport interface RangeData\u003cT, U = RangeValueType\u003cT\u003e\u003e {\n  value: number\n  data?: T\n  disabled?: boolean\n  unremovable?: boolean\n  renderTop?: RangeRenderFn\u003cT, U\u003e\n  renderBottom?: RangeRenderFn\u003cT, U\u003e\n}\nexport type RangeRenderFn\u003cT, U = RangeValueType\u003cT\u003e\u003e = (data: U) =\u003e VNode\nexport type RangeValue\u003cT, U = RangeValueType\u003cT\u003e\u003e = U | U[]\nexport type RangeProgress = ([number, number] | {\n  range: [number, number]\n  style?: CSSProperties\n  class?: string\n})[]\nexport type RangeMarks = Record\u003cnumber, string | {\n  label: string\n  style?: CSSProperties\n  class?: string\n}\u003e\n```\n\n## theme\n\nIf you want to customize the theme, just use CSS variables to override the default theme.\n\n```css\n.m-range-theme {\n  --c-primary: #409eff; /* primary color */\n  --c-fill: #e4e7ed; /* track's fill color */\n  --c-fill-stop: #f5f5f5; /* stop's fill color */\n  --c-fill-thumb: #fff; /* thumb's fill color */\n}\n```\n\n## License\n\n[MIT](./LICENSE) License © 2023-PRESENT [wiidede](https://github.com/wiidede)\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/vue-range-multi?style=flat\u0026colorA=080f12\u0026colorB=1fa669\n[npm-version-href]: https://npmjs.com/package/vue-range-multi\n[npm-downloads-src]: https://img.shields.io/npm/dm/vue-range-multi?style=flat\u0026colorA=080f12\u0026colorB=1fa669\n[npm-downloads-href]: https://npmjs.com/package/vue-range-multi\n[bundle-src]: https://img.shields.io/bundlephobia/minzip/vue-range-multi?style=flat\u0026colorA=080f12\u0026colorB=1fa669\u0026label=minzip\n[bundle-href]: https://bundlephobia.com/result?p=vue-range-multi\n[license-src]: https://img.shields.io/github/license/wiidede/vue-range-multi.svg?style=flat\u0026colorA=080f12\u0026colorB=1fa669\n[license-href]: https://github.com/wiidede/vue-range-multi/blob/main/LICENSE\n[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat\u0026colorA=080f12\u0026colorB=1fa669\n[jsdocs-href]: https://www.jsdocs.io/package/vue-range-multi\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiidede%2Fvue-range-multi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwiidede%2Fvue-range-multi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiidede%2Fvue-range-multi/lists"}