How to Create Range Slider in Vue.js

Published on January 13, 2021 48 sec read

Sometimes we need to filter data. To make filter pretty, we need range slider. In this article, I’m going to show how to make range slider in Vue.js. I’m tetsing on Vue 3.

Table of Contents

  1. Install Package
  2. Single Range Slider
  3. Multiple Sliders
  4. Note

Install Package

First, we need to install @vueform/slider package. Run this command to install:

npm install @vueform/slider

Single Range Slider

Just paste the code in App.vue:

App.vue
<template>
  <div>
    <div class="output">Data: {{ value }}</div>
    <Slider v-model="value" />
  </div>
</template>

<script>
  import Slider from '@vueform/slider'

  export default {
    components: {
      Slider,
    },
    data() {
      return {
        value: 20
      }
    }
  }
</script>

<style src="@vueform/slider/themes/default.css"></style>

<style scoped>
.output {
  font-family: Courier, Courier New, Lucida Console, Monaco, Consolas;
  background: #000000;
  color: #ffffff;
  padding: 20px;
  margin-bottom: 50px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}
</style>

Output:

Multiple Sliders

Just change the value of value:

<script>
  import Slider from '@vueform/slider'

  export default {
    components: {
      Slider,
    },
    data() {
      return {
        value: [20, 40]
      }
    }
  }
</script>

Output:

Note

You’ll get more usage & examples on their GitHub repo. You can also use it in Vue 2. Have a look at their GitHub repository.

That’s all, artisans. Thanks for reading. 🙂

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.
Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development.

Follow

Leave a Reply

Your email address will not be published. Required fields are marked *