Vue Bootstrap Slider

Vue Slider - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

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>