mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
8121faa1d4
* keep header styles with repositioned description text * `animated-image` move description to component * code style * `avatar` add summary from docs * `badge` add summary from docs * `breadcrumb` add summary from docs * `button` add summary from docs * lead sentence is now part of the header * `button-group` add summary from docs * `card` add summary from docs * `checkbox` add summary from docs * `color-picker` add summary from docs * `details` add summary from docs * `dialog` add summary from docs * `divider` add summary from docs * `drawer` add summary from docs * `dropdown` add summary from docs * `format-bytes` add summary from docs * `format-date` add summary from docs * `format-number` add summary from docs * `icon` add summary from docs * `icon-button` add summary from docs * `image-comparer` add summary from docs * `include` add summary from docs * `input` add summary from docs * `menu` add summary from docs * `menu-item` add summary from docs * `menu-label` add summary from docs * `popup` add summary from docs * `progressbar` add summary from docs * `progress-ring` add summary from docs * `radio` add summary from docs * `radio-button` add summary from docs * `range` add summary from docs * `rating` add summary from docs * `relative-time` add summary from docs * `select` add summary from docs * `skeleton` add summary from docs * `spinner` add summary from docs * `split-panel` add summary from docs * `switch` add summary from docs * `tab-group` add summary from docs * `tag` add summary from docs * `textarea` add summary from docs * `tooltip` add summary from docs * `visually-hidden` add summary from docs * `animation` add summary from docs * `breadcrumb-item` add summary from docs * `mutation-observer` add summary from docs * `radio-group` add summary from docs * `resize-observer` add summary from docs * `tab` add summary from docs * `tab-panel` add summary from docs * `tree` add summary from docs * `tree-item` add summary from docs * remove `title` for further usage of `Sl` classnames in docs * revert: use markdown parser for component summary
181 lines
4.3 KiB
Markdown
181 lines
4.3 KiB
Markdown
# Range
|
|
|
|
[component-header:sl-range]
|
|
|
|
```html preview
|
|
<sl-range></sl-range>
|
|
```
|
|
|
|
```jsx react
|
|
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](/getting-started/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.
|
|
|
|
```html preview
|
|
<sl-range label="Volume" min="0" max="100"></sl-range>
|
|
```
|
|
|
|
```jsx react
|
|
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.
|
|
|
|
```html preview
|
|
<sl-range label="Volume" help-text="Controls the volume of the current song." min="0" max="100"></sl-range>
|
|
```
|
|
|
|
```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} />;
|
|
```
|
|
|
|
### 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} />;
|
|
```
|
|
|
|
### Disabled
|
|
|
|
Use the `disabled` attribute to disable a slider.
|
|
|
|
```html preview
|
|
<sl-range disabled></sl-range>
|
|
```
|
|
|
|
```jsx react
|
|
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.
|
|
|
|
```html preview
|
|
<sl-range tooltip="bottom"></sl-range>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => <SlRange tooltip="bottom" />;
|
|
```
|
|
|
|
### Disable the Tooltip
|
|
|
|
To disable the tooltip, set `tooltip` to `none`.
|
|
|
|
```html preview
|
|
<sl-range tooltip="none"></sl-range>
|
|
```
|
|
|
|
```jsx react
|
|
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.
|
|
|
|
```html preview
|
|
<sl-range
|
|
style="
|
|
--track-color-active: var(--sl-color-primary-600);
|
|
--track-color-inactive: var(--sl-color-primary-100);
|
|
"
|
|
></sl-range>
|
|
```
|
|
|
|
```jsx react
|
|
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 Track Offset
|
|
|
|
You can customize the initial offset of the active track using the `--track-active-offset` custom property.
|
|
|
|
```html preview
|
|
<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>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
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%'
|
|
}}
|
|
/>
|
|
);
|
|
```
|
|
|
|
### 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.
|
|
|
|
```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>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => <SlRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;
|
|
```
|
|
|
|
[component-metadata:sl-range]
|