shoelace/docs/components/range.md

181 wiersze
3.7 KiB
Markdown
Czysty Zwykły widok Historia

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
<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 />
);
```
2021-05-13 13:11:24 +00:00
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
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
```
### 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: rgb(var(--sl-color-primary-600));
--track-color-inactive: rgb(var(--sl-color-primary-200));
"></sl-range>
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRange
style={{
'--track-color-active': 'rgb(var(--sl-color-primary-600))',
'--track-color-inactive': 'rgb(var(--sl-color-primary-200))'
}}
/>
);
```
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]