Customizable Range Slider Input For Vue.js

Install & Download:

# Yarn
$ yarn add vue-custom-range-slider
# NPM
$ npm i vue-custom-range-slider --save

Description:

A custom range slider component built on top of Vue and native range input. With support for custom values, labels, thumbs, and more.

How to use it:

1. Import the Customizable Range Slider.

import CustomSlider from "vue-custom-range-slider";
import "vue-custom-range-slider/dist/vue-custom-range-slider.css";

2. Add the custom-slider component to the template.

<custom-slider :values="sliderValues" raising v-model="slider"/>

3. Register the component and mount it to the app.

export default {
  name: "app",
  components: {
    CustomSlider
  },
  data() {
    return {
      changed: false,
      slider: "a",
      sliderValues: null,
      sliderValues1: [
        {
          label: "Not at all",
          value: "a"
        },
        {
          label: "A tiny bit",
          value: "b"
        },
        {
          label: "Its ok",
          value: "c"
        },
        {
          label: "Its very good",
          value: "d"
        },
        {
          label: "Its AMAZING!",
          value: "e"
        }
      ],
      sliderValues2: [
        {
          label: "Something else",
          value: "1"
        },
        {
          label: "Something else else",
          value: "2"
        },
        {
          label: "Comp",
          value: "3"
        }
      ]
    };
  }
};

4. All default component props.

value: {
  type: String,
  required: false,
  default: ""
},
values: {
  type: Array,
  required: false,
  default: () => []
},
min: {
  type: String,
  required: false,
  default: "0"
},
max: {
  type: String,
  required: false,
  default: "100"
},
step: {
  type: String,
  required: false,
  default: "1"
},
hideLabel: {
  type: Boolean,
  required: false,
  default: false
},
raising: {
  type: Boolean,
  required: false,
  default: false
}