4.5 KiB
meta | layout | ||||
---|---|---|---|---|---|
|
component |
<sl-range></sl-range>
import SlRange from '@shoelace-style/shoelace/dist/react/range';
const App = () => <SlRange />;
:::tip
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
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-range>
import SlRange from '@shoelace-style/shoelace/dist/react/range';
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-range>
import SlRange from '@shoelace-style/shoelace/dist/react/range';
const App = () => <SlRange label="Volume" help-text="Controls the volume of the current song." min={0} max={100} />;
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/range';
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/range';
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/range';
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/range';
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>
{% raw %}
import SlRange from '@shoelace-style/shoelace/dist/react/range';
const App = () => (
<SlRange
style={{
'--track-color-active': 'var(--sl-color-primary-600)',
'--track-color-inactive': 'var(--sl-color-primary-200)'
}}
/>
);
{% endraw %}
Custom Track Offset
You can customize the initial offset of the active track using the --track-active-offset
custom property.
<sl-range
min="-100"
max="100"
style="
--track-color-active: var(--sl-color-primary-600);
--track-color-inactive: var(--sl-color-primary-100);
--track-active-offset: 50%;
"
></sl-range>
{% raw %}
import SlRange from '@shoelace-style/shoelace/dist/react/range';
const App = () => (
<SlRange
min={-100}
max={100}
style={{
'--track-color-active': 'var(--sl-color-primary-600)',
'--track-color-inactive': 'var(--sl-color-primary-200)',
'--track-active-offset': '50%'
}}
/>
);
{% endraw %}
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/range';
const App = () => <SlRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;