Range

Vue Bootstrap 5 Range

A Range is an interactive component that lets the user swiftly slide through possible values spread over the desired range.

Note: Read the API tab to find all available options and advanced customization

Basic example

The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “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>
              <MDBRange label="Example range" v-model="range1" />
            </template>
          
        
    
        
            
            <script>
              import { MDBRange } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBRange
                },
                setup() {
                  const range1 = ref(50);

                  return {
                    range1
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRange } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const range1 = ref(50);
            </script>

Disabled

Add the disabled boolean attribute on a component to give it a grayed out appearance and remove pointer events. 

        
            
            <template>
              <MDBRange label="Example range" disabled />
            </template>
          
        
    
        
            
            <script>
              import { MDBRange } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBRange
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRange } from "mdb-vue-ui-kit";
            </script>

Min and max

Range inputs have implicit values for min and max — 0 and 100, respectively. You may specify new values for those using the min and max attributes. 

        
            
            <template>
              <MDBRange label="Example range" v-model="range2" :min="0" :max="5" />
            </template>
          
        
    
        
            
            <script>
              import { MDBRange } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBRange
                },
                setup() {
                  const range2 = ref(3);

                  return {
                    range2
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRange } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const range2 = ref(3);
            </script>

Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step attribute. In the example below, we double the number of steps by using :step="0.5". 

        
            
            <template>
              <MDBRange label="Example range" v-model="range3" :min="0" :max="5" :step="0.5" />
            </template>
          
        
    
        
            
            <script>
              import { MDBRange } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBRange
                },
                setup() {
                  const range3 = ref(2.5);

                  return {
                    range3
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRange } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const range3 = ref(2.5);
            </script>

Import

        
            
          <script>
            import { MDBRange } from "mdb-vue-ui-kit";
          </script>

Properties

Property Type Default Description
disabled Boolean false Disables input
id String unique random id Changes input's id
inputClass String "" Adds input classes
label String "" Changes input label
labelClass String "" Adds input label classes
max Number 100 Sets maximum value
min Number 0 Sets minimum value
step Number 1 Defines range step
tag String "div" Changes input wrapper tag
thumb Boolean true Enables or disables thumb.
thumbClass String "" Adds thumb classes
v-model Number 50 Changes input value with two-way data binding
wrapperClass String "" Adds input wrapper classes

CSS variables

        
            
        // .range
        --#{$prefix}range-thumb-height: #{$range-thumb-height};
        --#{$prefix}range-thumb-width: #{$range-thumb-width};
        --#{$prefix}range-thumb-top: #{$range-thumb-top};
        --#{$prefix}range-thumb-margin-left: #{$range-thumb-margin-left};
        --#{$prefix}range-thumb-border-radius: #{$range-thumb-border-radius};
        --#{$prefix}range-thumb-transform: #{$range-thumb-transform};
        --#{$prefix}range-thumb-transition: #{$range-thumb-transition};
        --#{$prefix}range-thumb-value-font-size: #{$range-thumb-value-font-size};
        --#{$prefix}range-thumb-value-line-height: #{$range-thumb-value-line-height};
        --#{$prefix}range-thumb-value-color: #{$range-thumb-value-color};
        --#{$prefix}range-thumb-value-font-weight: #{$range-thumb-value-font-weight};
        --#{$prefix}range-thumb-background: #{$range-thumb-background};

SCSS variables

        
            
        $range-thumb-height: 30px;
        $range-thumb-width: 30px;
        $range-thumb-top: -35px;
        $range-thumb-background: $primary;
        $range-thumb-active-background: tint-color($primary, 70%);
        $range-thumb-margin-left: -15px;
        $range-thumb-border-radius: 50% 50% 50% 0;
        $range-thumb-transform: scale(0);
        $range-thumb-transition: transform 0.2s ease-in-out;
        $range-thumb-value-font-size: 12px;
        $range-thumb-value-line-height: 30px;
        $range-thumb-value-color: rgb(255, 255, 255);
        $range-thumb-value-font-weight: 500;
        // override default bootstrap values for form range
        $form-range-thumb-bg: $range-thumb-background;
        $form-range-thumb-active-bg: $range-thumb-active-background;