Tiny Range Slider For Vue.js

Install & Download:

# Yarn
$ yarn add @domak/vue-ragneslider@latest
# NPM
$ npm i @domak/vue-ragneslider@latest --save

Description:

A tiny, customizable, and accessible range slider for Vue.js app.

Basic usage:

1. Import and register the component.

import RangeSlider from "@domak/vue-rangeslider";
export default {
  components: {
    RangeSlider
  }
}

2. Add the range slider to the template.

<template>
  <RangeSlider></RangeSlider>
</template>

3. Customize the range slider with the following props.

min: {
  type: Number,
  default: 0,
},
max: {
  type: Number,
  default: 100,
},
bar: {
  type: Object,
},
handle: {
  type: Object,
},
tooltip: {
  type: Object,
},
range: {
  type: Object,
},
sliceNum: {
  type: Number,
  default: 3,
},
width: {
  type: String,
  default: '50%',
},
height: {
  type: String,
  default: '',
},
defaultMin: {
  type: Number,
  default: 50,
},
defaultMax: {
  type: Number,
  default: 70,
},
isKeyAllowed: {
  type: Boolean,
  default: false,
},
gap: {
  type: Number,
  default: 5,
}

4. Default bar options.

{
  width: '100%',
  height: '10px',
  color: 'black',
  sliceColor: '#049DBF',
},

5. Defaul handle options.

{
  width: '12px',
  height: '12px',
  color: '#D93D4A',
  borderRadius: '50%',
},

6. Default tooltip options.

{
  width: '20px',
  height: '20px',
  color: '#F2C84B',
  visibility: false,
  borderRadius: '30%',
  textColor: 'white',
},

Preview: