Vue bindings for seiyria/bootstrap-slider

Downloads in past


1622.1.84 years ago6 years agoMinified + gzip package size for vue-bootstrap-slider in KB


Vue.js Bootstrap Slider
npm npm
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';
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'



  • 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


  • Default: false
If the slide event should be triggered when programmatically setting the value


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


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

export default {
  data () {
    return {
      value: 5
  methods: {
    slideStart () {
    slideStop () {

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