Vue.js Bootstrap Slider
Easily use seiyria's Bootstrap Slider component in Vue.js
Click here for a live example
How to install
Install from npm with:
npm install --save vue-bootstrap-slider
The default export of this package is a VuePlugin.
;Vue
if you wish to import the component you can use:
;
Next import the bootstrap-slider styles (or use less or sass):
Options
debounce
- Default:
0
milliseconds The events triggered bybootstrap-slider
originates from mouse-move events and can easily flood your listeners. Setting this value will debounce the events trigger. You can also just debounce or throttle your own listener
trigger-slide-event
- Default:
false
If the slide event should be triggered when programmatically setting the value
trigger-change-event
- Default:
false
If the change (and input) event should be triggered when programmatically setting the value
See bootstrap-slider for a full list of options
❗️ When listening to slider events, listen to the kebab-case'd event name and not the camelCase'd. E.g. listen for
@slide-start
and not for@slideStart
Example
Slider has value {{ value }}
Exclude jQuery dependency
By default seiyria/bootstrap-slider requires jquery which means that if you include this package you will also add jquery to your project. If you do not use jquery anywhere in your project, check here how to prevent the full jquery library from being added to your project build.
If you are using nuxt
you can set the following in your nuxt.config.js
:
build: { configresolvealias'jquery' = '~components/jquery-stub.js' }
Direct access to the Slider object from your component
<b-form-slider ref="mySlider"></b-form-slider> const mySlider = this$refsmySlidermySliderslider