Edit these docs

Multi-range slider

Bootstrap multi-range slider

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.



        <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 



          $('#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. 



        <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.



        <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 



        <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.


        <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.



        <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.


        <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


        <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.



        <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.


        <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.



        <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


        <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
Edit these docs

Getting started: download & setup

Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 10,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

  • Community developed components & design projects
  • Technical support & community forum
  • CLI interface & free project hosting
  • Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!

Sign up now