shoelace/docs/pages/components/multi-range.md

meta	layout
title description Multi-Range Multi-Ranges allow the user to select multiple values within a given range using a slider with multiple handles.	component

<sl-multi-range></sl-multi-range>

import SlRange from '@shoelace-style/shoelace/dist/react/multi-range';

const App = () => <SlRange />;

Examples

Min, Max, and Step

Use the min and max attributes to set the range's minimum and maximum values, respectively. The step attribute determines the value's interval when increasing and decreasing.

<sl-multi-range min="1" max="10" step="1" value="0,10"></sl-multi-range>

{% raw %}

import SlRange from '@shoelace-style/shoelace/dist/react/multi-range';

const App = () => <SlRange min={1} max={10} step={1} value={[0,10]}/>;

{% endraw %}

Disabled

Use the disabled attribute to disable a slider.

<sl-multi-range disabled></sl-multi-range>

import SlRange from '@shoelace-style/shoelace/dist/react/multi-range';

const App = () => <SlRange disabled />;

Arbitrary Number of Handles

You can use any number of handles on the slider. The slider will have one handle for every element in the value array.

<sl-multi-range value="25,50,75"></sl-multi-range>

{% raw %}

import SlRange from '@shoelace-style/shoelace/dist/react/multi-range';

const App = () => <SlRange value={[25,50,75]} />;

{% endraw %}

Label and Help Text

You can add an accessible label and/or descriptive help text using the label and help-text attributes or slots.

<sl-multi-range label="Difficulty Range" help-text="Search for challenges within the desired difficulty range"></sl-multi-range>

import SlRange from '@shoelace-style/shoelace/dist/react/multi-range';

const App = () => <SlRange label="Difficulty Range" help-text="Search for challenges within the desired difficulty range" />;

Custom Track Colors

You can customize the active and inactive portions of the track using the --track-color-active and --track-color-inactive custom properties.

<sl-multi-range
	value="25,75"
	style="
		--track-color-active: var(--sl-color-green-300);
		--track-color-inactive: var(--sl-color-red-300);
	"
></sl-multi-range>

{% raw %}

import SlRange from '@shoelace-style/shoelace/dist/react/multi-range';

const App = () => <SlRange value={[25,75]} style={{
	'--track-color-active': 'var(--sl-color-green-300)',
	'--track-color-inactive': 'var(--sl-color-red-300)'
}}/>;

{% endraw %}