Multi-range slider

Bootstrap multi-range slider

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 huge 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.
upgrade with discount

This plugin allows to create more ranges than one. It's easy to use and customizable.

Note info: This plugin does not work with MDB Slider, which is available in MDB Pro version.

Basic example

Basic example of range slider is that when you have just 2 ranges and swiftly slide through possible values spread on the desired range.

Edit in sandbox 
        
            

        <form class="multi-range-field my-5 pb-5">
          <input id="multi" class="multi-range" type="range" />
        </form>

      
        
    
        
            

          $('#multi').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 1
              },
            }
          });

Defaults settings

Edit in sandbox 
        
            

          $('#multi').mdbRange({
            width: '100%',
            direction: 'vertical',
            value: {
              min: 0,
              max: 100,
            },
            single: {
              active: true,
              value: {
                step: 1,
                symbol: ''
              },
              counting: false,
              countingTarget: null,
              bgThumbColor: '#4285F4',
              textThumbColor: '#fff',
              multi: {
                active: true,
                value: {
                  step: 1,
                  symbol: ''
                },
                counting: false,
                rangeLength: 2,
                countingTarget: null,
                bgThumbColor: '#4285F4',
                textThumbColor: '#fff'
              },
            }
          });

One range

You can easily have 1 range slider. Check example below.

Edit in sandbox 
        
            

        <form class="multi-range-field my-5 pb-5">
          <input id="multi1" class="multi-range" type="range" />
        </form>

      
        
    
        
            

          $('#multi1').mdbRange({
            single: {
              active: true
            }
          });

Basic examples

MDB Range Sliders allow to use more catchy options. Check examples bellow and check our options docs about it.

Width

You can easly change width of your ranges.

Edit in sandbox 
        
            

        <form class="multi-range-field my-5 pb-5">
          <input id="multi3" class="multi-range" type="range" />
        </form>
        <form class="multi-range-field my-5 pb-5">
          <input id="multi4" class="multi-range" type="range" />
        </form>
        <form class="multi-range-field my-5 pb-5">
          <input id="multi5" class="multi-range" type="range" />
        </form>
        <form class="multi-range-field my-5 pb-5">
          <input id="multi6" class="multi-range" type="range" />
        </form>

      
        
    
        
            

          $('#multi3').mdbRange({
            width: '100%',
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 2
              },
            }
          });

          $('#multi4').mdbRange({
            width: '75%',
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 2
              },
            }
          });

          $('#multi5').mdbRange({
            width: '50%',
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 2
              },
            }
          });

          $('#multi6').mdbRange({
            width: '25%',
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 2
              },
            }
          });

Direction

You can have vertical or horizntal slider range. Range slider is styling absolute, take it into consideration

Edit in sandbox 
        
            

        <form class="multi-range-field my-5 pb-5">
          <input id="multi2" class="multi-range" type="range" />
        </form>

      
        
    
        
            

          $('#multi2').mdbRange({
            width: '30%',
            direction: 'horizontal',
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 2
              },
            }
          });

Value

Basic min value of range is 0 and max 100. You can change it to any number what you want. Check example below.

Edit in sandbox 
        
            
        <form class="multi-range-field my-5 pb-5">
          <input id="multi7" class="multi-range" type="range" />
        </form>
        <form class="multi-range-field my-5 pb-5">
          <input id="multi8" class="multi-range" type="range" />
        </form>
        <form class="multi-range-field my-5 pb-5">
          <input id="multi9" class="multi-range" type="range" />
        </form>
      
        
    
        
            
          $('#multi7').mdbRange({
            value: {
              min: -250,
              max: 250
            },
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 2
              },
            }
          });
          $('#multi8').mdbRange({
            value: {
              min: 250,
              max: 1000
            },
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 2
              },
            }
          });
          $('#multi9').mdbRange({
            value: {
              min: 1000,
              max: 1500
            },
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 2
              },
            }
          });

Single range slider properties

First range has own properties what you can use.

You can easily change color of thumb, change value of step, add symbol or you can even add new options to display value in selected item.

There are a few exmaples when you can see how it working.

Step and symbol

Basic step value is 1 and symbol is empty string.

Edit in sandbox 
        
            

        <form class="multi-range-field my-5 pb-5">
          <input id="multi10" class="multi-range" type="range" />
        </form>
        <form class="multi-range-field my-5 pb-5">
          <input id="multi11" class="multi-range" type="range" />
        </form>
        <form class="multi-range-field my-5 pb-5">
          <input id="multi12" class="multi-range" type="range" />
        </form>

      
        
    
        
            

          $('#multi10').mdbRange({
            single: {
              active: true,
              value: {
                step: 1,
                symbol: ''
              }
            }
          });

          $('#multi11').mdbRange({
            single: {
              active: true,
              value: {
                step: 2,
                symbol: '$'
              }
            }
          });
          $('#multi12').mdbRange({
            single: {
              active: true,
              value: {
                step: 5,
                symbol: '&#10052;'
              }
            }
          });

Counting

You can active counting to display values of range at your selected element. You can use ID to show value at only one element or you can use class to show this value at different element.

Edit in sandbox 
        
            
        <form class="multi-range-field my-5 pb-5">
          <input id="multi13" class="multi-range" type="range" />
        </form>

        <!-- ID Example -->
        <label for="ex">ID Example</label>
        <input type="text" id="ex" class="form-control" disabled>

        <form class="multi-range-field my-5 pb-5">
          <input id="multi14" class="multi-range" type="range" />
        </form>

        <!-- Class example -->
        <label for="exampleForm2">Class example</label>
        <input type="text" id="exampleForm2" class="form-control ex1" disabled>

        <!-- Class example -->
        <label for="exampleForm21">Class example</label>
        <input type="text" id="exampleForm21" class="form-control ex1" disabled>

        <!-- Class example -->
        <label for="exampleForm22">Class example</label>
        <input type="text" id="exampleForm22" class="form-control ex1" disabled>

      
        
    
        
            
          $('#multi13').mdbRange({
            single: {
              active: true,
              counting: true,
              countingTarget: '#ex'
            }
          });

          $('#multi14').mdbRange({
            single: {
              active: true,
              counting: true,
              countingTarget: '.ex1'
            }
          });

Colors

You can change color of thumb and text inside thumb

Edit in sandbox 
        
            
        <form class="multi-range-field my-5 pb-5">
          <input id="multi15" class="multi-range" type="range" />
        </form>

        <form class="multi-range-field my-5 pb-5">
          <input id="multi16" class="multi-range" type="range" />
        </form>
      
        
    
        
            
          $('#multi15').mdbRange({
            single: {
              active: true,
              bgThumbColor: 'red',
              textThumbColor: '#000',
            }
          });

          $('#multi16').mdbRange({
            single: {
              active: true,
              bgThumbColor: 'rgba(0,255,111, .7)',
              textThumbColor: '#000',
            }
          });

Multi range sliders properties

Multi range sliders properties looks excalty the same like in a single range examples. Check examples below.

Note info: If you would like to use multi methods you have to have activated single range too. Otherwise your input range will be disabled.

Edit in sandbox 
        
            

        <form class="multi-range-field my-5 pb-5">
          <input id="multi17" class="multi-range" type="range" />
        </form>

        <form class="multi-range-field my-5 pb-5">
          <input id="multi18" class="multi-range" type="range" />
        </form>

      
        
    
        
            
          $('#multi17').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 3
              }
            }
          });

          $('#multi18').mdbRange({
            single: {
              active: false,
              multi: {
                active: true,
                rangeLength: 4
              }
            }
          });

Step and symbols

Basic step value is 1 and symbol is empty string.

Edit in sandbox 
        
            
        <form class="multi-range-field my-5 pb-5">
          <input id="multi19" class="multi-range" type="range" />
        </form>

        <form class="multi-range-field my-5 pb-5">
          <input id="multi20" class="multi-range" type="range" />
        </form>

        <form class="multi-range-field my-5 pb-5">
          <input id="multi21" class="multi-range" type="range" />
        </form>
      
        
    
        
            

          $('#multi19').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 3,
                step: 10,
                symbol: 'PLN'
              }
            }
          });

          $('#multi20').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 4,
                step: 2,
                symbol: '@'
              }
            }
          });

          $('#multi21').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 5,
                value: {
                  step: 5,
                  symbol: '$'
                }
              }
            }
          });

Counting

You can active counting to display values of range at your selected element. You can use ID to show value at only one element or you can use class to show this value at difrrent element.

Each element in array can have own selected item to display value.

Edit in sandbox 
        
            

        <form class="multi-range-field my-5 pb-5">
          <input id="multi22" class="multi-range" type="range" />
        </form>

        <!-- Example -->
        <label for="ex3">Example</label>
        <input type="text" id="ex3" class="form-control" disabled>
        <label for="ex4">Example</label>
        <input type="text" id="ex4" class="form-control" disabled>

        <form class="multi-range-field my-5 pb-5">
          <input id="multi23" class="multi-range" type="range" />
        </form>

        <!-- Example -->
        <label for="ex5">Example</label>
        <input type="text" id="ex5" class="form-control ex1" disabled>

        <!-- Example -->
        <label for="ex6">Example</label>
        <input type="text" id="ex6" class="form-control ex1" disabled>

        <!-- Example -->
        <label for="ex7">Example</label>
        <input type="text" id="ex7" class="form-control ex1" disabled>


        <form class="multi-range-field my-5 pb-5">
          <input id="multi24" class="multi-range" type="range" />
        </form>

        <!-- Example -->
        <label for="ex5">Example</label>
        <input type="text" id="ex51" class="form-control ex7" disabled>

        <!-- Example -->
        <label for="ex6">Example</label>
        <input type="text" id="ex52" class="form-control ex7" disabled>

        <!-- Example -->
        <label for="ex7">Example</label>
        <input type="text" id="ex733" class="form-control ex7" disabled>

      
        
    
        
            
          $('#multi22').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 2,
                counting: true,
                countingTarget: ['#ex3', '#ex4']
              }
            }
          });

          $('#multi23').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 3,
                counting: true,
                countingTarget: ['#ex5', '#ex6', '#ex7'],
              }
            }
          });

          $('#multi24').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 4,
                counting: true,
                countingTarget: ['.ex7'],
              }
            }
          });

Colors

You can change color of thumb and text inside thumb

Edit in sandbox 
        
            
        <form class="multi-range-field my-5 pb-5">
          <input id="multi25" class="multi-range" type="range" />
        </form>

        <form class="multi-range-field my-5 pb-5">
          <input id="multi26" class="multi-range" type="range" />
        </form>

        <form class="multi-range-field my-5 pb-5">
          <input id="multi27" class="multi-range" type="range" />
        </form>
      
        
    
        
            

          $('#multi25').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 3,
                bgThumbColor: ['black', '#eee'],
                textThumbColor: ['#fff', 'red']
              }
            }
          });

          $('#multi26').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 4,
                bgThumbColor: ['green', '#eee', 'brown'],
                textThumbColor: ['#fff', 'green', 'white']
              }
            }
          });

          $('#multi27').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 5,
                bgThumbColor: ['yellow', '#3e3', 'black', 'grey'],
                textThumbColor: ['black', 'black', 'pink', '#fff']
              }
            }
          });

Main Options

Name Type Custom Value Description
width string 100% Range width
direction string vertical Change to horizontal to change display
value: min number 0 Customize min value of input range
value: max number 100 Customize max value of input range

Single Options

Name Type Custom Value Description
active boolean true Active/inactive single input range slider
value: step number 1 Change step of input
value: symbol string '' Change symbol at thumb
counting boolean false Active couting mode
countingTarget object null ID or class of counting target
bgThumbColor color #4285F4 Background color of thumb
textThumbColor color #4285F4 Text color of thumb

Multi Options

Name Type Custom Value Description
active boolean false Active/inactive single input range slider
value: step number 2 Change step of input
value: symbol string '' Change symbol at thumb
counting boolean false Active couting mode
countingTarget object null ID or class of counting target or targets
rangeLength number 2 Number of range sliders
bgThumbColor color #4285F4 Background color of thumb or thumbs
textThumbColor color #4285F4 Text color of thumb or thumbs