Custom Range Slider For Vue.js 3

Description:

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,
  default: 'slider'
},
min: {
  type: Number,
  required: false,
  default: 0
},
max: {
  type: Number,
  required: false,
  default: 100
},
step: { // set -1 to enable fractions
  type: Number,
  required: false,
  default: 1
},
orientation: {
  type: String,
  required: false,
  default: 'horizontal',
},
direction: { // or 'rtl'
  type: String,
  required: false,
  default: 'ltr',
},
tooltips: {
  type: Boolean,
  required: false,
  default: true,
},
options: {
  type: Object,
  required: false,
  default: () => ({})
},
merge: { 
  // distance between two handles
  // e.g { merge: 5, step: 10 }
  type: Number,
  required: false,
  default: -1
},
height: {
  type: String,
  required: false,
  default: '300px'
},
format: {
  type: [Object, Function],
  required: false,
  default: null,
},

4. Event handlers.

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

Preview:

Custom Range Slider For Vue.js 3

Changelog:

v1.0.3 (01/06/2021)

  • Added disabled & id properties

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

You Might Be Interested In:

Add Comment