Vue Bootstrap Slider

Vue Slider - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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" v-model="rangeValue"></mdb-range-input>
      </template>
      
        
    

        
            
      <script>
        import {
          mdbRangeInput
        } from 'mdbvue';
        export default {
          name: 'SelectPage',
          components: {
            mdbRangeInput
          },
          data() {
            return {
              rangeValue: 50
            }
          }
        }
      </script>
      
        
    

Slider with different width MDB Pro component

Modify the width of the slider.

        
            
      <template>
        <div>
          <mdb-range-input wrapperClass="my-4 w-25" :min="0" :max="100" v-model="range1Value" wrapperClassName>
          </mdb-range-input>
          <mdb-range-input wrapperClass="my-4 w-50" :min="0" :max="100" v-model="range2Value" wrapperClassName>
          </mdb-range-input>
          <mdb-range-input wrapperClass="my-4 w-75" :min="0" :max="100" v-model="range3Value" wrapperClassName>
          </mdb-range-input>
          <mdb-range-input wrapperClass="my-4 w-100" :min="0" :max="100" v-model="range4Value" wrapperClassName>
          </mdb-range-input>
        </div>
      </template>
      
        
    

        
            
      <script>
        import {
          mdbRangeInput
        } from 'mdbvue';
        export default {
          name: 'SelectPage',
          components: {
            mdbRangeInput
          },
          data() {
            return {
              range1Value: 50,
              range2Value: 50,
              range3Value: 50,
              range4Value: 50
            }
          }
        }
      </script>
      
        
    

Slider with first and last value MDB Pro component

Use the example to add values with max and min offset at the beginning and end of the slider.

        
            
        <template>
          <div>
            <div class="d-flex justify-content-center my-4">
              <mdb-range-input wrapperClass="my-4 w-25" :min="20" :max="50" v-model="slider1Value" 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" v-model="slider2Value" 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" v-model="slider3Value" 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" v-model="slider4Value" wrapperClassName>
              </mdb-range-input>
            </div>
          </div>
        </template>
        
        
    

        
            
        <script>
          import {
            mdbRangeInput
          } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbRangeInput
            },
            data() {
              return {
                range1Value: 25,
                range2Value: 40,
                range3Value: 0,
                range4Value: 50
              }
            }
          }
        </script>