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

      


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

      

Defaults settings



        <script>
          $('#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'
              },
            }
          });
        </script>

      

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>

      

        <script>
          $('#multi1').mdbRange({
            single: {
              active: true
            }
          });
        </script>
      

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>

      


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

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

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

          $('#multi6').mdbRange({
            width: '25%',
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 1
              },
            }
          });
        </script>

      

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>

      


        <script>
          $('#multi2').mdbRange({
            width: '30%',
            direction: 'horizontal',
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 1
              },
            }
          });
        </script>

      

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>
      

        <script>
          $('#multi7').mdbRange({
            value: {
              min: -250,
              max: 250
            },
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 1
              },
            }
          });
          $('#multi8').mdbRange({
            value: {
              min: 250,
              max: 1000
            },
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 1
              },
            }
          });
          $('#multi9').mdbRange({
            value: {
              min: 1000,
              max: 1500
            },
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 1
              },
            }
          });
        </script>
      

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>

      


        <script>
          $('#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;'
              }
            }
          });
        </script>

      

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>

      

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

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

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>
      

        <script>
          $('#multi15').mdbRange({
            single: {
              active: true,
              bgThumbColor: 'red',
              textThumbColor: '#000',
            }
          });

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

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>

      

        <script>
          $('#multi17').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 2
              }
            }
          });

          $('#multi18').mdbRange({
            single: {
              active: false,
              multi: {
                active: true,
                rangeLength: 3
              }
            }
          });
        </script>
      

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>
      


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

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

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


      

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>

      

        <script>
          $('#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'],
              }
            }
          });
        </script>
      

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>
      


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

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

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

      

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

Getting started : download & setup


Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

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
  

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue