Non Programming Manager

    vue-bootstrap-slider

    2.1.8 • Public • Published

    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';
    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()

    Install

    npm i vue-bootstrap-slider

    DownloadsWeekly Downloads

    905

    Version

    2.1.8

    License

    MIT

    Unpacked Size

    172 kB

    Total Files

    18

    Last publish

    Collaborators

    • pimlie