How To Use Range Picker In Vue.js

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

Prerequisites

• node.js installed
• Tailwind CSS

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

• How To Add Tailwind CSS n Vue.js

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

 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>

Summary

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