⚠️ Please note this package is just a wrapper and not really a vue component. If you are looking for a real vue slider component take a look at vue-slider-component which recently added support for custom themes

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.

import bFormSlider from 'vue-bootstrap-slider';
Vue.use(bFormSlider)

if you wish to import the component you can use:

import bFormSlider from 'vue-bootstrap-slider/es/form-slider';

Next import the bootstrap-slider styles (or use less or sass):

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 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

<template>
  <div>
    <b-form-slider :value="value" @slide-start="slideStart" @slide-stop="slideStop"></b-form-slider>
    <p>Slider has value {{ value }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: 5
    }
  },
  methods: {
    slideStart () {
      console.log('slideStarted')
    },
    slideStop () {
      console.log('slideStopped')
    }
  }
}
</script>

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: {
    extend (config, ctx) {
      config.resolve.alias['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.$refs.mySlider
mySlider.slider.refresh()