Custom Range Slider For Vue.js 3

A customizable range slider component with support for tooltips, value foramtters, single/multiple sliders, and much more.

Compatible with both Vue.js 3 and Vue.js 2.

How to use it:

1. Import the register the slider component.

import Slider from '@vueform/slider'
// theme
<style src="@vueform/slider/themes/default.css"></style>

export default {
  components: {
    Slider,
  }
}

2. Add the slider component to the template and determine the initial value as follows:

export default {
  components: {
    Slider,
  },
  data() {
    return {
      value: 30
    }
  }
}

3. Available components to customize the range slider.

id: {
  type: [String, Number],
  required: false,
},
disabled: {
  type: Boolean,
  required: false,
  default: false,
},
min: {
  type: Number,
  required: false,
  default: 0
},
max: {
  type: Number,
  required: false,
  default: 100
},
step: {
  type: Number,
  required: false,
  default: 1
},
orientation: {
  type: String,
  required: false,
  default: 'horizontal',
},
direction: {
  type: String,
  required: false,
  default: 'ltr',
},
tooltips: {
  type: Boolean,
  required: false,
  default: true,
},
options: {
  type: Object,
  required: false,
  default: () => ({})
},
merge: {
  type: Number,
  required: false,
  default: -1
},
format: {
  type: [Object, Function, Boolean],
  required: false,
  default: null,
},
classes: {
  type: Object,
  required: false,
  default: () => ({}),
},
showTooltip: {
  type: String,
  required: false,
  default: 'always'
},
tooltipPosition: {
  type: String,
  required: false,
  default: null,
},
lazy: {
  type: Boolean,
  required: false,
  default: true,
},
ariaLabelledby: {
  type: String,
  required: false,
  default: undefined,
},

4. Event handlers.

• @change: after the value has changed
• @update: after the value has updated

Preview:

Changelog:

v2.1.7 (01/13/2023)

• Bugfixes

v2.1.6 (12/20/2022)

• Allow Slider instance without v-model
• Added new events: @start, @end, @drag, @slide, @set
• Bug Fixes

v2.1.5 (09/26/2022)

• Unnecessary ES6 feature removed.

v2.1.3/4 (09/23/2022)

• A11y improvements.
• Added ariaLabelledby prop.

v2.1.2 (07/23/2022)

• fix: tailwind build fix

v2.1.1 (07/11/2022)

• Vue.js 2.7 compatibility

v2.0.10 (05/11/2022)

• Refresh slider when the number of handles change.

v2.0.9 (02/26/2022)

• Added support for array classes.

v2.0.8 (12/10/2021)

• Added lazy option that prevents updating v-model on dragging by default
• Added tailwind.css.
• Bug Fixes

v2.0.6 (11/23/2021)

• Resolved devDependencies conflict.

v2.0.7 (11/23/2021)

• Followed up nouislider CSS changes.

v2.0.5 (09/07/2021)

• updated default.css classes and classes object in general. Please update to the latest, extended version.
• Updated to latest nouislider.
• Added tooltipPosition prop.
• Added options prop.
• Bug Fixes

v2.0.4 (08/02/2021)

• index.d.ts import fix

v2.0.3 (06/29/2021)

• Tailwind plugin fixes.

v2.0.1 (06/28/2021)

• Bug Fixes

v2.0.0 (06/28/2021)

• removed height prop & rewritten default.css.
• Added classes prop.
• Added CSS vars.
• id no longer defaults to undefined instead of slider.

Download Details:

Author: vueform

Live Demo: https://jsfiddle.net/u6ty74wz/10/

Download Link: https://github.com/vueform/slider/archive/main.zip

Official Website: https://github.com/vueform/slider

Install & Download:

# Yarn
$ yarn add @vueform/slider

# NPM
$ npm i @vueform/slider