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.

Edit in sandbox 
        
            
          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:
Edit in sandbox 
        
            
        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:
Edit in sandbox 
        
            
          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.

Edit in sandbox 
        
            
          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.

Edit in sandbox 
        
            
          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
className string '' Add custom class to the MDBMultiRange <MDBMultiRange className="class" />
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 />

Methods

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