# Vue.js Bootstrap Slider
[](https://npmjs.com/package/vue-bootstrap-slider)
[](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
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](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()
```