# Vue.js Bootstrap Slider [![npm](https://img.shields.io/npm/dt/vue-bootstrap-slider.svg?style=flat-square)](https://npmjs.com/package/vue-bootstrap-slider) [![npm](https://img.shields.io/npm/v/vue-bootstrap-slider.svg?style=flat-square)](https://npmjs.com/package/vue-bootstrap-slider) > Easily use [seiyria's Bootstrap Slider component](https://github.com/seiyria/bootstrap-slider) in Vue.js Click [here](https://pimlie.github.io/vue-bootstrap-slider/example.html) 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. ```js import bFormSlider from 'vue-bootstrap-slider'; Vue.use(bFormSlider) ``` if you wish to import the component you can use: ```js import bFormSlider from 'vue-bootstrap-slider/es/form-slider'; ``` Next import the bootstrap-slider styles (or use less or sass): ```js import 'bootstrap-slider/dist/css/bootstrap-slider.css' ``` ## Options ### `debounce` - Default: `0` milliseconds The events triggered by `bootstrap-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](https://github.com/seiyria/bootstrap-slider) for a full list of options > :exclamation: 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 ```html ``` ### 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](https://github.com/seiyria/bootstrap-slider#how-do-i-exclude-the-optional-jquery-dependency-from-my-build) 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`: ```js { build: { extend (config, ctx) { config.resolve.alias['jquery'] = '~components/jquery-stub.js' } } } ``` ### Direct access to the Slider object from your component ```js const mySlider = this.$refs.mySlider mySlider.slider.refresh() ```