Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Material Web

<img src="./docs/images/material-web.gif"
<img src="./g3doc/docs/images/material-web.gif"
title="Material web components"
alt="A collection of Material web components"
style="border-radius: 32px">
Expand All @@ -22,11 +22,11 @@ open-source design system.

## Resources

- [Introduction](./docs/intro.md)
- [Roadmap](./docs/roadmap.md)
- [Component docs](./docs/components/)
- [Bundle size](./docs/size.md)
- [Browser support and FAQ](./docs/support.md)
- [Introduction](./g3doc/docs/intro.md)
- [Roadmap](./g3doc/docs/roadmap.md)
- [Component docs](https://material-web.dev/components/)<!-- {.external} -->
- [Bundle size](./g3doc/docs/size.md)
- [Browser support and FAQ](./g3doc/docs/support.md)

## Quick start

Expand All @@ -35,7 +35,7 @@ open-source design system.
> instead.

This code snippet is a buildless example that loads `@material/web` from a CDN.
Check out the [quick start](./docs/quick-start.md) guide to install and build
Check out the [quick start](./g3doc/docs/quick-start.md) guide to install and build
for production.

<!-- LINT.IfChange -->
Expand Down
33 changes: 28 additions & 5 deletions docs/components/slider.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,12 +107,36 @@ when either handle is selected.
<md-slider labeled></md-slider>
```

<!-- TODO(b/318567101): ## Accessibility -->
## Accessibility

Add an
[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
attribute to single-handle sliders. For range sliders, provide
`aria-label-start` and `aria-label-end` for each respective handle.

Use `aria-valuetext` (or `aria-valuetext-start` and `aria-valuetext-end` for
range sliders) to supply human-readable values to assistive technologies when
the numeric value requires unit context (such as currency or temperature).

```html
<md-slider aria-label="Volume" value="50"></md-slider>

<md-slider
range
aria-label-start="Minimum price"
aria-label-end="Maximum price"
aria-valuetext-start="$20"
aria-valuetext-end="$100"
value-start="20"
value-end="100">
</md-slider>
```

## Theming

Slider supports [Material theming](../theming/README.md) and can be customized
in terms of color and shape.
Slider supports
[Material theming](/third_party/javascript/material/web/g3doc/docs/theming/README.md)
and can be customized in terms of color and shape.

### Tokens

Expand Down Expand Up @@ -160,8 +184,7 @@ Token | Default value

## API


### MdSlider <code>&lt;md-slider&gt;</code>
### MdSlider `<md-slider>`

#### Properties

Expand Down
Loading