Vertical Range Slider — Vue.js

When we think about a slider, we usually imagine an image gallery slider, or the infamous carousel. But range slider can be also very useful in many scenarios like price-range or min-max settings.

Step-1: Create a new project

Create a new project using vue create vertical-range-slider or any name of you choice.

Step-2: Add Slider component

• Now its time to add the core component i.e Slider. To do so, we need to create add its functionality first, So we create a new folder say SliderX and add a new javascript file say slider.js.
• Copy/paste the code below into the javascript file

• Now, that core functionality is added, now we can add the slider component, to do so, create a new file slider.vue.
• copy/paste the code below into the vue file

Step-3: Adding component to your project

Good job so far, now its time add the slider into the main.vue file, let’s showcase it in a better way,

copy/paste the code below into your main.vue file.

Well Done ✌

Save all the work done, and run the project by yarn serve and see the changes, Voilà you have created a new vertical-range -slider for your next project

Still, if you are facing any trouble or errors running this code, try cloning this repo : GITHUB