vue-bootstrap-slider

Vue.js Bootstrap Slider

Easily use seiyria's Bootstrap Slider component in Vue.js

How to install

Install from npm with:

npm install --save vue-bootstrap-slider

Require or import like so for ES6 (default export of this package is a VuePlugin):

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

or

import {bFormSlider} from 'vue-bootstrap-slider';

or like this for CommonJS:

var bFormSlider = require("vue-bootstrap-slider").bFormSlider

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

Example

See also example.html

<template>
  <div>
    <b-form-slider :value="value"/>
    <p>Slider has value {{ value }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: 5
    }
  }
}
</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'
    }
  }
}

Known issues

• Tooltips are not working in Bootstrap 4, see this issue