In this article, I will guide you on How to use Range picker in Vue.js

Prerequisites

You can check how to install Tailwind CSS in vue.js from the below link

Create Vue.js Project

To create a Vue.js app, use the following command in the terminal.

vue create tailwindcss

Install daisyUI

Install daisyUI using the following npm command

npm i daisyui

Open tailwind.config.js and add the following code.

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

Now right-click on the components folder and add a new component named 'rangepicker.vue'. Now open rangepicker.vue component and add the following code.

<template>
    <div class="container" style="margin: 27px;">
        <input type="range" min="0" max="100" value="40" class="range range-primary" />
    </div>
</template>
<script>
export default {
    name: 'Rangepickerdemo',
    props: {
        msg: String
    }
}
</script>
<style scoped>
h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}
</style>

Now open App.vue component. Add the following code in App.vue component.

<template>
  <div id="app">
    <Rangepickerdemo />
  </div>
</template>

<script>
import Rangepickerdemo from './components/rangepicker.vue'
export default {
  name: 'App',
  components: {
    Rangepickerdemo
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

Now run the application by using the following command.

npm run serve

How To Use Range Picker In Vue.js

Add the following code in rangepicker.vue component.

<template>
    <div class="container" style="margin: 27px;">
        <input type="range" min="0" max="100" value="40" class="range range-primary" />
        <input type="range" min="0" max="100" value="40" class="range range-secondary" />
        <input type="range" min="0" max="100" value="60" class="range range-md" />
        <input type="range" min="0" max="100" value="70" class="range range-lg" />
    </div>
</template>
<script>
export default {
    name: 'Rangepickerdemo',
    props: {
        msg: String
    }
}
</script>
<style scoped>
h3 {
    margin: 40px 0 0;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
</style>

How To Use Range Picker In Vue.js

Summary

In this article, we learned how to use Range picker in Vue.js.