Skip to content

docs(range): update docs to use label prop #2955

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
averyjohnston merged 5 commits into from
May 10, 2023
Merged

docs(range): update docs to use label prop #2955

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c6e28d7
migrate labelPlacement playground to use label prop
May 9, 2023
fbf468f
update modern syntax migration guide
May 9, 2023
f9a76c1
add label slot playground
May 9, 2023
faf17a0
rearrange label sections
May 10, 2023
f0f6182
rename basic playground to no-visible-label
May 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 16 additions & 5 deletions docs/api/range.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,37 @@ The Range slider lets users select from a range of values by moving the slider k

By default the Range slider has a minimum value of `0` and a maximum value of `100`. This can be configured with the `min` and `max` properties.

## Basic Usage
## Labels

import Basic from '@site/static/usage/v7/range/basic/index.md';
Range has several options for supplying a label for the component:
- `label` property: used for plaintext labels
- `label` slot: used for custom HTML labels
- `aria-label`: used for ranges with no visible label

<Basic />
### Label Placement

## Label Placement
The below demo shows how to use the `labelPlacement` property to change the position of the label relative to the range. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot.

import LabelsPlayground from '@site/static/usage/v7/range/labels/index.md';

<LabelsPlayground />

## Label Slot
### Label Slot

While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.

import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md';

<LabelSlotPlayground />

### No Visible Label

If no visible label is needed, devs should still supply an `aria-label` so the range is accessible to screen readers.

import Basic from '@site/static/usage/v7/range/basic/index.md';

<Basic />

## Decorations

Decorative elements can be passed into the `start` or `end` slots of the range. This is useful for adding icons such as low volume or high volume icons. Since these elements are decorative, they should not be announced by assistive technology such as screen readers.
Expand Down