2020-07-15 21:30:37 +00:00
# Range
[component-header:sl-range]
Ranges allow the user to select a single value within a given range using a slider.
```html preview
2021-09-30 11:51:28 +00:00
< sl-range > < / sl-range >
2020-07-15 21:30:37 +00:00
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRange / >
);
```
2022-01-11 14:18:20 +00:00
?> This component works with standard `<form>` elements. Please refer to the section on [form controls ](/getting-started/form-controls ) to learn more about form submission and client-side validation.
2020-07-15 21:30:37 +00:00
## Examples
2021-11-04 22:12:47 +00:00
### 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.
```html preview
< sl-range min = "0" max = "10" step = "1" > < / sl-range >
```
```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRange min = {0} max = {10} step = {1} / >
);
```
2020-07-15 21:30:37 +00:00
### Disabled
2021-07-08 21:41:10 +00:00
Use the `disabled` attribute to disable a slider.
2020-07-15 21:30:37 +00:00
```html preview
2021-11-04 22:12:47 +00:00
< sl-range disabled > < / sl-range >
```
```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRange disabled / >
);
2020-07-15 21:30:37 +00:00
```
### Tooltip Placement
By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
```html preview
2021-11-04 22:12:47 +00:00
< sl-range tooltip = "bottom" > < / sl-range >
```
```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRange tooltip = "bottom" / >
);
2020-07-15 21:30:37 +00:00
```
### Disable the Tooltip
To disable the tooltip, set `tooltip` to `none` .
```html preview
2021-11-04 22:12:47 +00:00
< sl-range tooltip = "none" > < / sl-range >
```
```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRange tooltip = "none" / >
);
2020-07-15 21:30:37 +00:00
```
2021-09-30 11:51:28 +00:00
### 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.
```html preview
< sl-range style = "
2021-11-18 22:41:03 +00:00
--track-color-active: var(--sl-color-primary-600);
--track-color-inactive: var(--sl-color-primary-100);
2021-09-30 11:51:28 +00:00
">< / sl-range >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRange
style={{
2021-11-18 22:41:03 +00:00
'--track-color-active': 'var(--sl-color-primary-600)',
'--track-color-inactive': 'var(--sl-color-primary-200)'
2021-11-04 22:12:47 +00:00
}}
/>
);
```
2020-07-15 21:30:37 +00:00
### Custom Tooltip Formatter
2021-07-08 21:41:10 +00:00
You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.
2020-07-15 21:30:37 +00:00
```html preview
< 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 >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRange
min={0}
max={100}
step={1}
tooltipFormatter={value => `Total - ${value}%` }
/>
);
```
2021-02-04 15:22:04 +00:00
### Labels
Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
```html preview
< sl-range label = "Volume" min = "0" max = "100" > < / sl-input >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRange label = "Volume" min = {0} max = {100} / >
);
```
2021-02-04 15:22:04 +00:00
### 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.
```html preview
< sl-range
label="Volume"
help-text="Controls the volume of the current song."
min="0"
max="100"
>< / sl-input >
```
2021-11-04 22:12:47 +00:00
```jsx react
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}
/>
);
```
2020-07-15 21:30:37 +00:00
[component-metadata:sl-range]