Knob-Slider using Vue.js

Slider can take many form, one of them is knob style element. Let’s take up the challenge and build one, using Vue.js and CSS

Step-1: Create a new project

vue create knob-slider

Step-2: Create the knob component

After, you create a new project, Now its time to create the knob component, So create a new file inside component folder (say: knob.vue).

Then, copy/paste the below code into that file.

Step-3: Adding the knob component to project

Now that we have created the knob component, its time to add this component to our project so that we can interact with it easily.

copy/paste this code below into your main file (eg: App.vue)

Well Done 🍾

Voilà, you have successfully created knobs for your next project, try yarn serve to run locally on your machine.

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