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