shoelace/docs/components/range.md

Range

[component-header:sl-range]

Ranges allow the user to select a single value within a given range using a slider.

<sl-range></sl-range>

import { SlRange } from '@shoelace-style/shoelace/dist/react';

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

?> This component works with standard <form> elements. Please refer to the section on form controls to learn more about form submission and client-side validation.

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-range min="0" max="10" step="1"></sl-range>

import { SlRange } from '@shoelace-style/shoelace/dist/react';

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

Disabled

Use the disabled attribute to disable a slider.

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

import { SlRange } from '@shoelace-style/shoelace/dist/react';

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

Tooltip Placement

By default, the tooltip is shown on top. Set tooltip to bottom to show it below the slider.

<sl-range tooltip="bottom"></sl-range>

import { SlRange } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRange tooltip="bottom" />
);

Disable the Tooltip

To disable the tooltip, set tooltip to none.

<sl-range tooltip="none"></sl-range>

import { SlRange } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRange tooltip="none" />
);

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-range style="
  --track-color-active: var(--sl-color-primary-600);
  --track-color-inactive: var(--sl-color-primary-100);
"></sl-range>

import { SlRange } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRange 
    style={{
      '--track-color-active': 'var(--sl-color-primary-600)',
      '--track-color-inactive': 'var(--sl-color-primary-200)'
    }}
  />
);

Custom Tooltip Formatter

You can change the tooltip's content by setting the tooltipFormatter property to a function that accepts the range's value as an argument.

<sl-range min="0" max="100" step="1" class="range-with-custom-formatter"></sl-range>

<script>
  const range = document.querySelector('.range-with-custom-formatter');
  range.tooltipFormatter = value => `Total - ${value}%`;
</script>

import { SlRange } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRange 
    min={0}
    max={100}
    step={1}
    tooltipFormatter={value => `Total - ${value}%`}
  />
);

Labels

Use the label attribute to give the range an accessible label. For labels that contain HTML, use the label slot instead.

<sl-range label="Volume" min="0" max="100"></sl-input>

import { SlRange } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRange label="Volume" min={0} max={100} />
);

Help Text

Add descriptive help text to a range with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.

<sl-range 
  label="Volume" 
  help-text="Controls the volume of the current song."
  min="0"
  max="100"
></sl-input>

import { SlRange } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRange 
    label="Volume" 
    help-text="Controls the volume of the current song."
    min={0}
    max={100}
  />
);

[component-metadata:sl-range]