Let’s construct a scenario for ourselves here. Say you want to allow a user to select a value within a predefined range using the user interface of a slider that can be dragged back and forth. Yes, this is very specific. Yes, this is coincidentally exactly what the Vue Slider component, the subject of this blog post, does. But, say this is exactly what you want to do… this is where the Vue Slider component will come in handy; and in this blog post I will go over what it does, the versatility that the options bring, and how to do a basic implementation of it.
Introduction to the Vue Slider component
The Vue Slider component can be installed by following the instructions here: https://github.com/NightCatSama/vue-slider-component
The extremely basic form of the vue slider component allows for a slider to be moved back and forth, with the position of the draggable circle being the value that’s emitted by the component. A simple example is here:
I’ll ignore the options in JS at this point. For now, we’ll focus on the HTML side. As you can see, when the slider is declared it needs a value to be passed in as a v-model property.
This references the data attribute of ‘value’ in the Vue Component. By passing this in, Vue binds the value so that any movement of the slider updates this value in the component.
The button below the slider calls a method which displays an alert; while passing in the getValue function that the vue slider component ships with. This method simply captures the value of the current position of the vue slider component as an integer; allowing for this value to be outputted, as done in the example, or it could be sent as part of a form request, or used to calculate another value. Pretty much anything you could want to do with the versatility of the value being an integer.
Customising the component
To dig deeper, we can use the wide array of options to customise the slider component to our liking. The full list of options are in the github link above and are explained simply enough, but I’ll just go over a few of the more complex ones here.
By simply changing the value property to an array of two values, the slider can be changed to a range slider which outputs an array for two values. This can be useful for capturing a minimum and maximum value for a filter, for example:
Another useful option is lazy. This option will ensure that the slider will only update the value property once you’ve stopped moving the drag and drop section of the slider; this would be useful for if you’re watching the value to run a method when it changes. If you’re running that method on every small change, this could impact the performance; especially if it’s running an AJAX request.
An example of the slider with the lazy option set to true is here:
As well as having these options to your disposal, the methods supplied with Vue Slider can come in handy; as seen in the examples so far, using the getValue method. The methods available to you are:
| setValue | Any integer passed into here will be set as the value of the slider |
| getValue | As seen before, getValue captures the current position of the slider and returns an integer |
| setIndex | setIndex sets the index of the component; the index being the position in the array in the data model |
| getIndex | Pretty much the inverse of setIndex, as getIndex just gets the index of the component in the array |
These methods have been demonstrated here:
The document at https://github.com/NightCatSama/vue-slider-component is a useful resource to understand how to install this component and for more information on the rest of the options.
For an example of a more advanced implementation of this component, please view Part 2, here.
