Light Dark System
Get ready for more awesome! Web Awesome, the next iteration of Shoelace, is on Kickstarter. Read Our Story

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

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"></sl-multi-range>

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

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

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>

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)'
}}/>;

Formatter and Suffix

You can customize the display with a formatter and a suffix. So a number can be formatted as a currency and a suffix can be added 

<sl-multi-range label="Currency" id="formater_test" min="1" max="100000" value="0,100000" style="margin-bottom:50px;display:block"></sl-multi-range>
<script>
    const element = document.querySelector('#formater_test');
    element.tooltipFormatter = (value) => new Intl.NumberFormat('de-DE', {
          style: 'currency', // decimal, percent, unit ...
          maximumFractionDigits: 0,
          currency: 'EUR',
        }).format(value);
</script>

<sl-multi-range label="Select length" id="formater_suffix_test" min="1" max="2000" value="0,2000" suffix="mm"></sl-multi-range>
<script>
    const element = document.querySelector('#formater_suffix_test');
    element.tooltipFormatter = (value) => value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    
    //or
    /*
    new Intl.NumberFormat('de-DE', {
          style: 'unit',
          maximumFractionDigits: 0,
          unit:"millimeter",
          unitDisplay: 'short'
        }).format(value);
    
    */
</script>

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/@viur/shoelace@1.0.8-v2.19.1/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/@viur/shoelace@1.0.8-v2.19.1/cdn/components/multi-range/multi-range.js';

To import this component using a bundler:

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

To import this component as a React component:

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

Slots

Name Description
label The range’s label. Alternatively, you can use the label attribute.
help-text Text that describes how to use the input. Alternatively, you can use the help-text attribute.

Learn more about using slots.

Properties

Name Description Reflects Type Default
name The name of the range, submitted as a name/value pair with form data. string ''
label The range’s label. If you need to display HTML, use the label slot instead. string ''
helpText
help-text 		The range’s help text. If you need to display HTML, use the help-text slot instead. 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
suffix Set a suffix for units like currency, … string ""
tooltip The preferred placement of the range’s tooltip. 'top' | 'bottom' | 'none' 'top'
value The current values of the input (in ascending order) as a string of comma-separated values - -
valueAsArray Gets or sets the current values of the range as an array of numbers - -
defaultValue The default value of the form control. Primarily used for resetting the form control. string '0,100'
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 -
validity Gets the validity state object ValidityState -
validationMessage Gets the validation message 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-blur onSlBlur Emitted when the control loses focus. -
sl-change onSlChange Emitted when an alteration to the control’s value is committed by the user. -
sl-focus onSlFocus Emitted when the control gains focus. -
sl-input onSlInput Emitted when the control receives input. -

Learn more about events.

Methods

Name Description Arguments
checkValidity() Checks for validity but does not show a validation message. Returns true when valid and false when invalid. -
reportValidity() Checks for validity and shows the browser’s validation message if the control is invalid. -
setCustomValidity() Sets a custom validation message. Pass an empty string to restore validity. message: string
getForm() Gets the associated form, if one exists. -

Learn more about methods.

Custom Properties

Name Description Default
--thumb-size The size of the thumb.
--tooltip-offset The vertical distance the tooltip is offset from the track.
--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.

Parts

Name Description
form-control The form control that wraps the label, input, and help text.
form-control-label The label’s wrapper.
form-control-help-text The help text’s wrapper.
base The component’s base wrapper.
tooltip The range’s tooltip.

Learn more about customizing CSS parts.