Multi Range Slider

React Bootstrap 5 Multi Range Slider component

MDBootstrap slider is an interactive component that lets the user swiftly slide through possible values spread over a desired range. .

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

Basic example

A multi-range-slider slider is gonna autoinit if you add class multi-range-slider to your element. Multi-range Slider starts with max 100 and min 0 values. 

        
            
          import React from 'react';
          import { 
            MDBMultiRange, 
          } from 'mdb-react-ui-kit';

          export default function App() {
            return (
              <MDBMultiRange />
            );
          }

Basic example with values

You can show values in the another element in dom

Value:
First:
Second:
 
        
            
        import React from 'react';
        import { 
          MDBMultiRange, 
        } from 'mdb-react-ui-kit';

        export default function App() {
          const [basicValues, setBasicValues] = useState<{ first?: number; second?: number }>({ first: 0, second: 100 });

          return (
            <>
              <MDBMultiRange getValues={(values) => setBasicValues(values)} />
              <p>Value:</p>
              <p>First: {basicValues.first}</p>
              <p>Second: {basicValues.second}</p>
            </>
          );
        }

Start Values

You can change start values to ranges with option startValues.

Value:
        
            
          import React from 'react';
          import { 
            MDBMultiRange, 
          } from 'mdb-react-ui-kit';

          export default function App() {
            const [startValues, setStartValues] = useState<{ first?: number; second?: number }>({ first: 0, second: 100 });

            return (
              <>
                <MDBMultiRange defaultValues={{ first: 40, second: 80 }} getValues={(values) => setStartValues(values)} />
                <p>Value:</p>
                <p>First: {startValues.first}</p>
                <p>Second: {startValues.second}</p>
              </>
            );
          }

Tooltips

You can set tooltip to ranges with option tooltip.

        
            
          import React from 'react';
          import { 
            MDBMultiRange, 
          } from 'mdb-react-ui-kit';

          export default function App() {
            return (
               <MDBMultiRange tooltips />
            );
          }

Step example

You can set a step to the ranges with option step.

        
            
          import React from 'react';
          import { 
            MDBMultiRange, 
          } from 'mdb-react-ui-kit';

          export default function App() {
            return (
              <MDBMultiRange step='5' />
            );
          }

Multi Range Slider - API

Import

        
            
            import { 
              MDBMultiRange,
            } from 'mdb-react-ui-kit';

Properties

MDBMultiRange

Name Type Default Description Example
defaultValues { first?: number; second?: number } '' Default values of the input <MDBMultiRange defaultValues={values} />
min string | number '' Minimum value of the MDBMultiRange <MDBMultiRange min='5' />
max string | number '' Maximum value of the MDBMultiRange <MDBMultiRange max='16' />
step string '1' Change the step of the MDBMultiRange <MDBMultiRange step='5' />
tooltips boolean false Enables tooltips <MDBMultiRange tooltips />

Events

Name Type Default Description Example
getValues (values: { first?: number; second?: number }) => void - Returns input values on change <MDBMultiRange getValues={(e)=>console.log(e)} />

CSS variables

        
            
        // .multi-range-slider
        --#{$prefix}multi-range-sliderhand-focus-box-shadow: #{$form-range-thumb-focus-box-shadow};
        --#{$prefix}multi-range-slider-horizontal-height: #{$multi-range-slider-horizontal-height};
        --#{$prefix}multi-range-hand-width: #{$form-range-thumb-width};
        --#{$prefix}multi-range-hand-height: #{$form-range-thumb-height};
        --#{$prefix}multi-range-hand-bg: #{$form-range-thumb-bg};
        --#{$prefix}multi-range-hand-border-radius: #{$range-thumb-border-radius};
        --#{$prefix}multi-range-hand-box-shadow: #{$form-range-thumb-box-shadow};
        --#{$prefix}multi-range-hand-transition: #{$form-range-thumb-transition};
        --#{$prefix}multi-range-hand-active-bg: #{$form-range-thumb-active-bg};
        --#{$prefix}multi-range-track-bg: #{$form-range-track-bg};
        --#{$prefix}multi-range-tooltip-transition: #{$multi-range-tooltip-transition};
        --#{$prefix}multi-range-tooltip-border-radius: #{$multi-range-tooltip-border-radius};
        --#{$prefix}multi-range-tooltip-transform: #{$multi-range-tooltip-transform};
        --#{$prefix}multi-range-tooltip-transform-active: #{$multi-range-tooltip-transform-active};
        --#{$prefix}multi-range-tooltip-content-size: #{$multi-range-tooltip-content-size};
        --#{$prefix}multi-range-tooltip-content-transform: #{$multi-range-tooltip-content-transform};
        --#{$prefix}multi-range-tooltip-content-font-size: #{$multi-range-tooltip-content-font-size};
        --#{$prefix}multi-range-tooltip-position-top: #{$multi-range-tooltip-position-top};

SCSS variables

        
            
        $multi-range-slider-horizontal-height: 0.25rem;
        $multi-range-tooltip-transition: top 0.2s, transform 0.2s, border-radius 0.2s;
        $multi-range-tooltip-border-radius: 50% 50% 50% 0;
        $multi-range-tooltip-position-top: -18px;
        $multi-range-tooltip-transform: rotate(-45deg) translate(-5px, -4px) scale(0);
        $multi-range-tooltip-transform-active: rotate(-45deg) translate(-5px, -4px) scale(1);
        $multi-range-tooltip-content-size: 30px;
        $multi-range-tooltip-content-transform: rotate(45deg) translateY(25%);
        $multi-range-tooltip-content-font-size: 10px;