Using the Vue Slider component in Vue 2 (Part 2)

Following on from the first post covering this component, I will now go through a more advanced implementation of the Vue Slider component.

I’ll start with separating the range slider to two separate sliders. In this example, one of the sliders will represent a minimum value for a form question, and the second slider will be for the maximum. I will also implement the ability to ensure the minimum value is always below the maximum.

As you can see here, there are now two sliders, and the value of the first one is stored in minValue, with the value of the second being stored in maxValue. The problem here is that the minimum is allowed to be higher than the maximum; which is something we don’t want to happen.
To combat this, I will create a method that watches each slider, and if the minimum moves above the maximum slider, the maximum slider’s value will increase to match the minimum slider. Or if the maximum slider moves to below the minimum slider, then the minimum slider’s value will decrease to match the value of the maximum slider.

To read more about the Vue Slider component and other ways to use the options available to implement this in other ways within your website/web app, view the documentation for this component here: https://github.com/NightCatSama/vue-slider-component