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,
},
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,
},

4. Event handlers.

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

Preview:

Custom Range Slider For Vue.js 3

Changelog:

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.

v1.0.5 (04/10/2021)

  • Fixed :disabled property

v1.0.4 (04/10/2021)

  • Fixed :disabled property
  • Don’t emit change on exogenous change

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:

One Response

  1. Monali July 23, 2021

Add Comment