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.

undefined
undefined 
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;