Add a Vuejs Range Slider with vue-slider-component

We can add a range slider in a Vuejs app with the vue-slider-component.

To use it, we install it by running:

npm i vue-slider-component

Then we can use it after registering it:

<template>
  <div>
    <vue-slider v-model="value"/>
    <p>{{value}}</p>
  </div>
</template>

<script>
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/antd.css";

export default {
  components: {
    VueSlider
  },
  data() {
    return {
      value: 0
    };
  }
};
</script>

We import the component and the styles and then register the component.

Then we add the vue-slider component to add the range slider to our component.

Now we see a slider displayed on the screen.

The min value is 0 and max is 100 by default.

It has many other options.

We can set the interval prop to change the interval.

We can add the mark prop to display numbers on the range slider.

Also, we can add the tooltip prop to display a tooltip with the currently selected value.

For instance, we can write:

<template>
  <div>
    <vue-slider v-model="value" tooltip="always"/>
    <p>{{value}}</p>
  </div>
</template>

<script>
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/antd.css";

export default {
  components: {
    VueSlider
  },
  data() {
    return {
      value: 0
    };
  }
};
</script>

to show the tooltip.

The min and max values can be changed with the minRange and maxRange props respectively.

The fixed prop keeps the distance between 2 sliders fixed.

For instance, we can write:

<template>
  <div>
    <vue-slider v-model="value" :minRange="20" :maxRange="50"/>
    <p>{{value}}</p>
  </div>
</template>

<script>
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/antd.css";

export default {
  components: {
    VueSlider
  },
  data() {
    return {
      value: [0, 100]
    };
  }
};
</script>

We have an array for value to enable range mode.

This will make the range slider show 2 slider handles instead of one.

Then we can set the min and max values which will be the positions of 2 sliders.

The vue-slider-component is a range slider that has many options.

We can select a single number or a range of numbers.

The interval can be changed and we can display numbers on the range slider or the tooltip as we wish.