Light Dark System

Multi Range

<sl-multi-range> | SlMultiRange
Since next experimental

Multi-Ranges allow the user to select multiple values within a given range using a slider with multiple handles. 

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

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

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

Examples

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-primary-300);
		--track-color-inactive: var(--sl-color-neutral-200);
	"
></sl-multi-range>

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

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

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>

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

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

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]"
	style="
		--track-color-active: var(--sl-color-primary-300);
		--track-color-inactive: var(--sl-color-neutral-200);
	"
></sl-multi-range>

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

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

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.14.0/cdn/components/multi-range/multi-range.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.14.0/cdn/components/multi-range/multi-range.js';

To import this component using a bundler:

import '@shoelace-style/shoelace/dist/components/multi-range/multi-range.js';

To import this component as a React component:

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

Properties

Name Description Reflects Type Default
label The range’s label. string ''
disabled Disables the range. boolean false
min The minimum acceptable value of the range. number 0
max The maximum acceptable value of the range. number 100
step The interval at which the range will increase and decrease. number 1
value The current values of the range - -
tooltipFormatter A function used to format the tooltip’s value. The range’s value is passed as the first and only argument. The function should return a string to display in the tooltip. (value: number) => string -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-change onSlChange Emitted when an alteration to the control’s value is committed by the user. -
sl-input onSlInput Emitted when the control receives input. -

Learn more about events.

Custom Properties

Name Description Default
--thumb-size The size of the thumb.
--track-color-active The color of the portion of the track that represents the current value.
--track-color-inactive The of the portion of the track that represents the remaining value.
--track-height The height of the track.

Learn more about customizing CSS custom properties.