{"id":13809969,"url":"https://github.com/vueform/slider","last_synced_at":"2025-05-16T11:03:47.091Z","repository":{"id":38006228,"uuid":"325645504","full_name":"vueform/slider","owner":"vueform","description":"Vue 3 slider component with multihandles, tooltips merging and formatting (+Tailwind CSS support).","archived":false,"fork":false,"pushed_at":"2024-06-16T10:45:05.000Z","size":713,"stargazers_count":282,"open_issues_count":20,"forks_count":44,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T06:05:47.737Z","etag":null,"topics":["range","range-slider","range-slider-component","range-slider-library","slider-range","tailwind","tailwindcss","vue","vue2","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://vueform.com","language":"JavaScript","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/vueform.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2020-12-30T20:50:07.000Z","updated_at":"2025-04-05T12:50:51.000Z","dependencies_parsed_at":"2024-06-18T13:44:44.731Z","dependency_job_id":null,"html_url":"https://github.com/vueform/slider","commit_stats":{"total_commits":122,"total_committers":4,"mean_commits":30.5,"dds":"0.024590163934426257","last_synced_commit":"e65e39585ae39093af6c40de235a055135bfa375"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Fslider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Fslider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Fslider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Fslider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vueform","download_url":"https://codeload.github.com/vueform/slider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518383,"owners_count":22084374,"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","range-slider","range-slider-component","range-slider-library","slider-range","tailwind","tailwindcss","vue","vue2","vue3","vuejs"],"created_at":"2024-08-04T02:00:40.914Z","updated_at":"2025-05-16T11:03:47.069Z","avatar_url":"https://github.com/vueform.png","language":"JavaScript","funding_links":[],"categories":["Packages","JavaScript","Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vueform/slider\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dm/@vueform/slider?color=%2353ca2f\"\u003e\n  \u003c/a\u003e\n\n  \u003cimg alt=\"CircleCI\" src=\"https://img.shields.io/circleci/build/github/vueform/slider\"\u003e\n\n  \u003ca href=\"https://codecov.io/gh/vueform/slider\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/codecov/c/github/vueform/slider\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/@vueform/slider\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm bundle size (scoped version)\" src=\"https://img.shields.io/bundlephobia/minzip/@vueform/slider?color=53ca2f\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://discord.gg/WhX2nG6GTQ\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/787237947635793940\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/@vueform/slider\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/@vueform/slider\"\u003e\n  \u003c/a\u003e\n\n  \u003ch1\u003eVue 3 Slider\u003c/h1\u003e\n  \n  \u003ca href=\"https://vueform.com?cid=toggle\" target=\"_blank\"\u003e\n    \u003cbr\u003e\n    \u003cimg align=\"center\" src=\"https://github.com/vueform/slider/raw/main/assets/logo.svg\" width=\"110\"\u003e\n    \u003cbr\u003e\n  \u003c/a\u003e\n\n  \u003cbr\u003e\n  \u003cbr\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/@vueform/slider\" target=\"_blank\"\u003e\n    \u003cimg align=\"center\" src=\"https://github.com/vueform/slider/raw/main/assets/screenshot-1.png\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n## Sponsors\n\n\u003cdiv align=\"center\"\u003e\u003cbr\u003e\n  \u003ca href=\"https://vueform.com?cid=toggle\"\u003e\u003cimg src=\"https://github.com/vueform/slider/raw/main/assets/logo-horizontal.svg\" width=\"200\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n## About Vueform\n\n\u003ca href=\"https://vueform.com?cid=slider\"\u003e\n  \u003cimg align=\"center\" src=\"https://github.com/vueform/multiselect/raw/main/assets/vueform-banner.png\" alt=\"Vueform\" title=\"Vueform\"\u003e\n\u003c/a\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\nVueform is comprehensive **form development framework** for Vue.js. It supercharges and standardizes the entire form building process and takes care of everything from rendering to validation and processing. With our latest tool, the **Drag and Drop Form Builder**, you can allow your developers \u0026 non-tech workforce to build the most complex forms without coding.\n\nFeature highlights:\n- integrate Vueform **Drag and Drop Form Builder** into **any application**\n- save forms in **database** as a JSON\n- use your **own form elements** with **custom configuration** options\n- a complete theming and templating system with **Tailwind support**\n- 25+ form elements with **multi-file uploads**, date pickers and rich text editor\n- element **nesting** and **repeating**\n- **50+ validators** with async, dependent and custom rules\n- **conditional logic** on element \u0026 form level\n- breaking forms into **steps** with **form wizard**\n- **translating** form content and global i18n support.\n\n\u003ca href=\"https://builder.vueform.com/demo?cid=slider\"\u003e\n  \u003cimg align=\"center\" src=\"https://github.com/vueform/multiselect/raw/main/assets/builder-banner.png\" alt=\"Vueform Builder\" title=\"Vueform Builder\"\u003e\n\u003c/a\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n**Learn more:**\n- Builder: [https://builder.vueform.com](https://builder.vueform.com?cid=slider)\n- Framework: [https://vueform.com](https://vueform.com?cid=slider)\n\n## Other libraries\n\n* [@vueform/multiselect](https://github.com/vueform/multiselect) - Vue 3 multiselect component with single select, multiselect and tagging options.\n* [@vueform/toggle](https://github.com/vueform/toggle) - Vue 3 toggle component with labels, custom slots and styling options.\n\n## Slider features\n\n* Vue 2 \u0026 3 support\n* 100% coverage\n* TypeScript support\n* ESM support\n* Fully configurable\n* Single slider\n* Multiple sliders\n* Tooltips\n* Formatting\n* CSS vars support\n* Accessibility support\n* Tailwind \u0026 utility class support\n* Based on [noUiSlider](https://github.com/leongersen/noUiSlider)\n\n## Sections\n\n* [Demo](#demo)\n* [Installation](#installation)\n  * [Using with Vue 3](#using-with-vue-3)\n  * [Using with Vue 2](#using-with-vue-2)\n* [Support](#support)\n* [Configuration](#configuration)\n  * [Basic props](#basic-props)\n  * [Events](#events)\n* [Styling](#styling)\n  * [Styling with CSS vars](#styling-with-css-vars)\n  * [Styling with Tailwind CSS](#styling-with-tailwind-css)\n* [Examples](#examples)\n  * [Single slider](#single-slider)\n  * [Multiple slider](#multiple-slider)\n  * [Tooltip formatting](#tooltip-formatting)\n  * [Tooltip merging](#tooltip-merging)\n* [License](#license)\n\n## Demo \n\nCheck out our [demo](https://jsfiddle.net/0Lp1bqyv/).\n\n## Installation\n\n```\nnpm install @vueform/slider\n```\n\n### Using with Vue 3\n\n``` vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cSlider v-model=\"value\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Slider from '@vueform/slider'\n\n  export default {\n    components: {\n      Slider,\n    },\n    data() {\n      return {\n        value: 20\n      }\n    }\n  }\n\u003c/script\u003e\n\n\u003cstyle src=\"@vueform/slider/themes/default.css\"\u003e\u003c/style\u003e\n```\n\n### Using with Vue 2\n\n``` vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cSlider v-model=\"value\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Slider from '@vueform/slider/dist/slider.vue2.js'\n\n  export default {\n    components: {\n      Slider,\n    },\n    data() {\n      return {\n        value: 20\n      }\n    }\n  }\n\u003c/script\u003e\n\n\u003cstyle src=\"@vueform/slider/themes/default.css\"\u003e\u003c/style\u003e\n```\n\n#### Using with \u003c Vue 2.7\n\nSwitch to [`\u003c= 2.0.10`](https://github.com/vueform/slider/tree/2.0.10) to use the Slider with Vue.js `\u003c 2.7`.\n\n## Support\n\nJoin our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](https://github.com/vueform/slider/issues).\n\n## Configuration\n\n### Basic props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| **id** | `string` | `slider` | The `id` attribute of slider container DOM. |\n| **lazy** | `boolean` | `true` | Whether to update `v-model` only when the slider value is set and not while dragging. If disabled you must not use inline objects as props (eg. `format`, `options`, `classes`) but outsource them to a data property. |\n| **disabled** | `boolean` | `false` | Whether the slider should be disabled. |\n| **min** | `number` | `0` | Minimum value of the slider. |\n| **max** | `number` | `100` | Maximum value of the slider. |\n| **step** | `number` | `1` | The jump between intervals. If `-1` it enables fractions (eg. `1.23`). |\n| **tooltips** | `boolean` | `true` | Whether tooltips should show above handlers. |\n| **showTooltip** | `string` | `'always'` | When tooltips should be shown. Possible values: `always\\|focus\\|drag`. |\n| **merge** | `number` | `-1` | The step distance between two handles when their tooltips should be merged (when `step` is `-1` then `1` is assumed). Eg: \u003cbr\u003e\u003cbr\u003e `{ merge: 5, step: 10 }` \u003cbr\u003e -\u003e values: `0, \u003c=50` will merge \u003cbr\u003e -\u003e values: `0, 60` will not merge \u003cbr\u003e\u003cbr\u003e `{ merge: 5, step: -1 }` \u003cbr\u003e -\u003e values: `0, \u003c=5` will merge \u003cbr\u003e -\u003e values: `0, 5.01` will not merge  |\n| **format** | `object\\|function` |  | Formats the tooltip. It can be either a function that receives a `value` param and expects a string or number as return or an object with the following properties: \u003cbr\u003e `prefix` - eg `$` -\u003e `$100` \u003cbr\u003e `suffix` - eg `USD` -\u003e `100USD` \u003cbr\u003e `decimals` - eg `2` -\u003e `100.00`  \u003cbr\u003e `thousand` - eg `,` - `1,000` |\n| **orientation** | `string` | `'horizontal'` | The orientation of the slider. Possible values: `horizontal\\|vertical` |\n| **direction** | `string` | `'ltr'` | The direction of the slider. By default value increases *left-to-right* and *top-to-bottom*, which is reversed when using `rtl`. Possible values: `ltr\\|rtl` |\n| **tooltipPosition** | `string` | `null` | The position of the slider tooltips. Possible values: `null\\|'top'\\|'bottom'\\|'left'\\|'right'` depending on `orientation` prop. When `null` it equals to `orientation` default (`'top'` for `'horizontal'` and `'left'` for `'vertical'`). |\n| **aria** | `object` | | An object containing aria attributes to be added for each handle. |\n| **ariaLabelledby** | `string` | `null` | Sets the `aria-labelledby` attribute of handles. |\n| **options** | `object` | `{}` | Additional [options](https://refreshless.com/nouislider/slider-options/) for noUiSlider. |\n| **classes** | `object` | | An object of class names that gets merged with the default values. Default:\u003cbr\u003e`{`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`target: 'slider-target',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`ltr: 'slider-ltr',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`rtl: 'slider-rtl',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`horizontal: 'slider-horizontal',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`vertical: 'slider-vertical',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`textDirectionRtl: 'slider-txt-dir-rtl',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`textDirectionLtr: 'slider-txt-dir-ltr',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`base: 'slider-base',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`connects: 'slider-connects',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`connect: 'slider-connect',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`origin: 'slider-origin',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`handle: 'slider-handle',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`handleLower: 'slider-handle-lower',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`handleUpper: 'slider-handle-upper',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`touchArea: 'slider-touch-area',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tooltip: 'slider-tooltip',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tooltipTop: 'slider-tooltip-top',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tooltipBottom: 'slider-tooltip-bottom',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tooltipLeft: 'slider-tooltip-left',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tooltipRight: 'slider-tooltip-right',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`active: 'slider-active',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`draggable: 'slider-draggable',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`tap: 'slider-state-tap',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`drag: 'slider-state-drag'`\u003cbr\u003e`}` |\n\n\u003ca href=\"https://vueform.com?ref=ghb\"\u003e\n  \u003cimg align=\"center\" src=\"https://github.com/vueform/multiselect/raw/main/assets/vueform-banner.png\" alt=\"Vueform\" title=\"Vueform\"\u003e\n\u003c/a\u003e\n\n### Events\n\n| Event | Attributes | Description |\n| --- | --- | --- |\n| **@change** | `value` | Emitted when dragging the slider is finished or it's value changed by clicking, keyboard or programmatical set. |\n| **@update** | `value` | Emitted in the same scenarios as in `@change`, but also when the slider is being dragged if `lazy` option is disabled. |\n| **@set** | `value` | Emitted in the same scenarios as in `@change`, but also when the slider's `.set()` method is called. |\n| **@slide** | `value` | Emitted while the slider moves. |\n| **@drag** | `value` | Emitted the slider connect moves while dragging. |\n| **@start** | `value` | Emitted when the handle is activated and dragging started. |\n| **@end** | `value` | Emitted when the dragging ended. |\n\n## Styling\n\n### Styling with CSS vars\n\nThe following CSS variables can be used to customize slider when using `default.css`:\n\n``` css\n--slider-bg: #D1D5DB;\n--slider-connect-bg: #10B981;\n--slider-connect-bg-disabled: #9CA3AF;\n--slider-height: 6px;\n--slider-vertical-height: 300px;\n--slider-radius: 9999px;\n\n--slider-handle-bg: #fff;\n--slider-handle-border: 0;\n--slider-handle-width: 16px;\n--slider-handle-height: 16px;\n--slider-handle-radius: 9999px;\n--slider-handle-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,.32);\n--slider-handle-shadow-active: 0.5px 0.5px 2px 1px rgba(0,0,0,.42);\n--slider-handle-ring-width: 3px;\n--slider-handle-ring-color: #10B98130;\n\n--slider-tooltip-font-size: 0.875rem;\n--slider-tooltip-line-height: 1.25rem;\n--slider-tooltip-font-weight: 600;\n--slider-tooltip-min-width: 20px;\n--slider-tooltip-bg: #10B981;\n--slider-tooltip-bg-disabled: #9CA3AF;\n--slider-tooltip-color: #fff;\n--slider-tooltip-radius: 5px;\n--slider-tooltip-py: 2px;\n--slider-tooltip-px: 6px;\n--slider-tooltip-arrow-size: 5px;\n--slider-tooltip-distance: 3px;\n```\n\nOverride them globally:\n\n``` css\n:root {\n  --slider-connect-bg: #3B82F6;\n  --slider-tooltip-bg: #3B82F6;\n  --slider-handle-ring-color: #3B82F630;\n}\n```\n\nOr on instance level:\n\n``` vue\n\u003cSlider\n  v-model=\"value\"\n  class=\"slider-red\"\n/\u003e\n\n\u003cSlider\n  v-model=\"value\"\n  class=\"slider-blue\"\n/\u003e\n```\n\n``` css\n.slider-red {\n  --slider-connect-bg: #EF4444;\n  --slider-tooltip-bg: #EF4444;\n  --slider-handle-ring-color: #EF444430;\n}\n\n.slider-blue {\n  --slider-connect-bg: #3B82F6;\n  --slider-tooltip-bg: #3B82F6;\n  --slider-handle-ring-color: #3B82F630;\n}\n```\n\n### Styling with Tailwind CSS\n\nTo use the slider with Tailwind CSS you must add it as a plugin to `tailwind.config.js`:\n\n``` js\n// tailwind.config.js\n\nmodule.exports = {\n  // ...\n  plugins: [\n    require('@vueform/slider/tailwind'),\n  ]\n}\n```\n\nThis plugin adds certain utilities and variants which are neccessary for the slider but Tailwind does not provide by default.\n\nAfter that you need to import `themes/tailwind.scss` to you main component:\n\n``` vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cSlider ... /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  // ...\n\u003c/script\u003e\n\n\u003cstyle lang=\"scss\"\u003e\n  @import 'path/to/node_modules/@vueform/slider/themes/tailwind.scss'\n\u003c/style\u003e\n```\n\n#### Using `:classes` prop\n\nAlternatively you can define class names directly by passing them to the `Slider` component via `classes` property. When using this approach you don't need to import `tailwind.scss`. Here's a default styling for Tailwind CSS (the same included in `tailwind.scss`):\n\n``` vue\n\u003cSlider v-model=\"value\" :classes=\"{\n  target: 'relative box-border select-none touch-none tap-highlight-transparent touch-callout-none disabled:cursor-not-allowed',\n  focused: 'slider-focused',\n  tooltipFocus: 'slider-tooltip-focus',\n  tooltipDrag: 'slider-tooltip-drag',\n  ltr: 'slider-ltr',\n  rtl: 'slider-rtl',\n  horizontal: 'slider-horizontal h-1.5',\n  vertical: 'slider-vertical w-1.5 h-80',\n  textDirectionRtl: 'slider-txt-rtl',\n  textDirectionLtr: 'slider-txt-ltr',\n  base: 'w-full h-full relative z-1 bg-gray-300 rounded',\n  connects: 'w-full h-full relative overflow-hidden z-0 rounded',\n  connect: 'absolute z-1 top-0 right-0 transform-origin-0 transform-style-flat h-full w-full bg-green-500 cursor-pointer tap:duration-300 tap:transition-transform disabled:bg-gray-400 disabled:cursor-not-allowed',\n  origin: 'slider-origin absolute z-1 top-0 right-0 transform-origin-0 transform-style-flat h-full w-full h:h-0 v:-top-full txt-rtl-h:left-0 txt-rtl-h:right-auto v:w-0 tap:duration-300 tap:transition-transform',\n  handle: 'absolute rounded-full bg-white border-0 shadow-slider cursor-grab focus:outline-none h:w-4 h:h-4 h:-top-1.5 h:-right-2 txt-rtl-h:-left-2 txt-rtl-h:right-auto v:w-4 v:h-4 v:-top-2 v:-right-1.25 disabled:cursor-not-allowed focus:ring focus:ring-green-500 focus:ring-opacity-30',\n  handleLower: 'slider-hande-lower',\n  handleUpper: 'slider-hande-upper',\n  touchArea: 'h-full w-full',\n  tooltip: 'absolute block text-sm font-semibold whitespace-nowrap py-1 px-1.5 min-w-5 text-center text-white rounded border border-green-500 bg-green-500 transform h:-translate-x-1/2 h:left-1/2 v:-translate-y-1/2 v:top-1/2 disabled:bg-gray-400 disabled:border-gray-400 merge-h:translate-x-1/2 merge-h:left-auto merge-v:-translate-x-4 merge-v:top-auto tt-focus:hidden tt-focused:block tt-drag:hidden tt-dragging:block',\n  tooltipTop: 'bottom-6 h:arrow-bottom merge-h:bottom-3.5',\n  tooltipBottom: 'top-6 h:arrow-top merge-h:top-5',\n  tooltipLeft: 'right-6 v:arrow-right merge-v:right-1',\n  tooltipRight: 'left-6 v:arrow-left merge-v:left-7',\n  tooltipHidden: 'slider-tooltip-hidden',\n  active: 'slider-active shadow-slider-active cursor-grabbing',\n  draggable: 'cursor-ew-resize v:cursor-ns-resize',\n  tap: 'slider-state-tap',\n  drag: 'slider-state-drag',\n}\" /\u003e\n```\n\nThere are certain variants that help detecting different states/config of the slider:\n* `h` - applied when the slider is horizontal\n* `v` - applied when the slider is vertical\n* `merge-h` - applied when the slider is horizontal and tooltips are merged\n* `merge-v` - applied when the slider is horizontal and tooltips are merged\n* `disabled` - applied when the slider is disabled\n* `txt-rtl-h` - applied when the slider is horizontal and text direction is set to `rtl`\n* `tap` - applied when the slider bar is being taped to jump to certain position\n* `tt-focus` - applied when the slider should only display tooltips on focus (`showToolip: 'focus'`) and the slider is not focused\n* `tt-focused` - applied when the slider should only display tooltips on focus and the slider is focused\n* `tt-drag` - applied when the slider should only display tooltips on drag (`showToolip: 'drag'`) and the slider is not being dragged\n* `tt-dragging` - applied when the slider should only display tooltips on drag and the slider is being dragged\n\nThe `target` class receives `ltr`, `rtl`, `horizontal`, `vertical`, `textDirectionRtl`, `textDirectionLtr`, `focused`, `tooltipFocus`, `tooltipDrag`, `tap`, and `drag` classes when the related state is applied.\n\nCertain classes do not define any styles (like `.slider-horizontal`, `.slider-vertical`) but only required to detect certain states. If you are changing the class list for any class name make sure to always keep the ones that start with `slider-` to be able to use the utilities mentioned above (`h`, `v`, etc).\n\nIn case you need to override the same type of utility you might use [@neojp/tailwind-important-variant](https://www.npmjs.com/package/@neojp/tailwindcss-important-variant) and use eg. `bg-green-500!`.\n\n## Examples\n\n* [Single slider](#single-slider)\n* [Multiple slider](#multiple-slider)\n* [Tooltip formatting](#tooltip-formatting)\n* [Tooltip mergin](#tooltip-merging)\n* [Vertical slider](#vertical-slider)\n\n### Single slider\n\n``` vue\n\u003ctemplate\u003e\n  \u003cSlider\n    v-model=\"value\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Slider from '@vueform/slider'\n\n  export default {\n    components: { Slider },\n    data: () =\u003e ({\n      value: 20\n    })\n  }\n\u003c/script\u003e\n```\n\n[JSFiddle - Example #1](https://jsfiddle.net/0Lp1bqyv/)\n\n### Multiple slider\n\n``` vue\n\u003ctemplate\u003e\n  \u003cSlider\n    v-model=\"value\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Slider from '@vueform/slider'\n\n  export default {\n    components: { Slider },\n    data: () =\u003e ({\n      value: [20, 40]\n    })\n  }\n\u003c/script\u003e\n```\n\n[JSFiddle - Example #2](https://jsfiddle.net/0Lp1bqyv/)\n\n### Tooltip formatting\n\n``` vue\n\u003ctemplate\u003e\n  \u003cSlider\n    v-model=\"value\"\n    :format=\"format\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Slider from '@vueform/slider'\n\n  export default {\n    components: { Slider },\n    data: () =\u003e ({\n      value: 20,\n      format: function (value) {\n        return `€${Math.round(value)}`\n      }\n    })\n  }\n\u003c/script\u003e\n```\n\n[JSFiddle - Example #3](https://jsfiddle.net/0Lp1bqyv/)\n\n### Tooltip merging\n\n``` vue\n\u003ctemplate\u003e\n  \u003cSlider\n    v-model=\"value\"\n    :merge=\"merge\"\n    :format=\"format\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Slider from '@vueform/slider'\n\n  export default {\n    components: { Slider },\n    data: () =\u003e ({\n      value: [20, 30, 40],\n      merge: 10,\n      format: {\n        prefix: '$',\n        decimals: 2\n      }\n    })\n  }\n\u003c/script\u003e\n```\n\n[JSFiddle - Example #4](https://jsfiddle.net/0Lp1bqyv/)\n\n### Vertical slider\n\n``` vue\n\u003ctemplate\u003e\n  \u003cSlider\n    v-model=\"value\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Slider from '@vueform/slider'\n\n  export default {\n    components: { Slider },\n    data: () =\u003e ({\n      value: 50,\n      orientation: 'vertical',\n      direction: 'rtl'\n    })\n  }\n\u003c/script\u003e\n```\n\n[JSFiddle - Example #5](https://jsfiddle.net/0Lp1bqyv/)\n\n## License\n\n[MIT](https://github.com/vueform/slider/blob/main/LICENSE.md)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueform%2Fslider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvueform%2Fslider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueform%2Fslider/lists"}