Vue Super Slider
A super easy to use range slider for any Vue project.
Table of Contents
To install Vue Super Slider, use:
$ npm install vue-super-slider
To use Vue Super Slider in your Vue app, simply import it in the page or component you want to use it in:
There are two required props, min and max which signify the minimum and maximum value for the range slider. Any other props are optional and are passed via an options object.
The minimum value represented on the slider.
The maximum value represented on the slider.
There are optional parameters that can be passed as an object to the slider:
|options.barColor||string||The color of the slider bar that's not between the two handles.||#e5e5e5|
|options.barColorActive||string||The color of the slider bar that's between the two handles.||#42b883|
|options.background||string||The background image to use that spans above and across the whole slider.|
|options.prefix||string||A prefix to add to the numbers shown below the slider. For example: if you add a '$' then all values will look like they represent a dollar amount to the user.|
Now just having the slider wouldn't do you much good if you couldn't do anything based off the values.
This event is emitted whenever the user clicks, touches, or drags a handle and lets it go. The data emitted with it include the current min and max values of the slider after the event was completed.
This event is emitted while any of the handles are actively being dragged. This event will be called frequently and is recommended to be used if you need to work with the values before they're finalized. The data emitted with it include the most up to date min and max values of the slider.
This event is emitted whenever one of the handles is clicked on and starting to be dragged. The data emitted with this event is the handle that was dragged (either min or max) and the value of that slider when the event occurred.
This event is emitted when a handle on the slider is actively being dragged. The data emitted with this event is the handle that is being dragged and its value at that current moment. Note that this event is called frequently so you might want to use a debouce function.
This event is emitted whenever one of the handles is done being dragged. The data emitted with this event is the handle that is finished being dragged and the value it ended at.
To run all of the tests available for Vue Super Slider, use:
$ npm run test:unit