Vue Bootstrap Slider

Vue Slider - Bootstrap 4 & Material Design

Vue Bootstrap slider is an interactive component that lets the user swiftly slide through possible values spread on the desired range.

Its basic implementation is quite simple and does not require big blocks of code.

Examples of Bootstrap slider use:

  • Video progress bar
  • Volume increase/decrease
  • Enthusiasm-o-meter

See the following Bootstrap slider examples:

Info notification

If you were looking for a slider and you meant a carousel component, click here to see all the possibilities.


Default slider

Default styling for Bootstrap Slider component

Create custom <input type="range"> controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.


        <template>
          <div>
            <label for="customRange1">Example range</label>
            <input type="range" class="custom-range" id="customRange1">
          </div>
        </template>
      

Material slider MDB Pro component

Material Design styling for Bootstrap Slider component


        <template>
          <mdb-range-input :min="0" :max="100" :value="50"></mdb-range-input>
        </template>
      

        <script>
          import { mdbRangeInput } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbRangeInput
            }
          }
        </script>
      

Slider with different width MDB Pro component


        <template>
          <div>
            <mdb-range-input wrapperClass="my-4 w-25" :min="0" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
            <mdb-range-input wrapperClass="my-4 w-50" :min="0" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
            <mdb-range-input wrapperClass="my-4 w-75" :min="0" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
            <mdb-range-input wrapperClass="my-4 w-100" :min="0" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
          </div>
        </template>
      

        <script>
          import { mdbRangeInput } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbRangeInput
            }
          }
        </script>
      

Slider with first and last value MDB Pro component

0
100
0
100
0
100

        <template>
          <div>
            <div class="d-flex justify-content-center my-4">
                <mdb-range-input wrapperClass="my-4 w-25" :min="20" :max="50" :value="25" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
            </div>
            <div class="d-flex justify-content-center my-4">
                <mdb-range-input wrapperClass="my-4 w-50" :min="0" :max="40" :value="40" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
            </div>
            <div class="d-flex justify-content-center my-4">
                <mdb-range-input wrapperClass="my-4 w-75" :min="0" :max="100" :value="0" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
            </div>
            <div class="d-flex justify-content-center my-4">
                <mdb-range-input wrapperClass="my-4 w-100" :min="40" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
            </div>
          </div>
        </template>
      

        <script>
          import { mdbRangeInput } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbRangeInput
            }
          }
        </script>
      

Slider - API

In this section you will find advanced information about the Slider component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use to work with it.


Import statement


          import { mdbRangeInput } from 'mdbvue';
      

API Reference: Properties

Name Type Default Description Example
class String Override or extend the styles applied to the component. <mdb-range-input class="example-class" ... />
wrapperClass String Override or extend the styles applied to the wrapper form. <mdb-range-input wrapperClass="example-class" ... />
min Number 0 Specify the minimum slider value <mdb-range-input :min="0" ... />
max Number 100 Specify the maximum slider value <mdb-range-input :max="100" ... />
value Number 50 Specify slider value <mdb-range-input :value="50" ... />

API Reference: Methods

Name Parameters Description Example
v-on:getValue value Returns input value. Use this method instead of v-model to handle input value changes. <mdb-range-input @getValue="getRangeValue" />