Skip to content

Commit a641e18

Browse files
paulfthomaspekingme
paulfthomas
authored and
pekingme
committed
[NTC][Slider] Update documentation
PiperOrigin-RevId: 597297222
1 parent 6fd920a commit a641e18

16 files changed

+55
-35
lines changed

‎docs/components/Slider.md‎

Lines changed: 55 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ path: /catalog/sliders/
1212
[Sliders](https://m3.material.io/components/sliders/) allow users to make
1313
selections from a range of values.
1414

15-
!["Slider with sound icon buttons on each end."](assets/slider/slider_hero.png)
15+
!["Slider animation."](assets/slider/slider_hero.gif)
1616

1717
**Contents**
1818

@@ -36,7 +36,8 @@ page.
3636

3737
### Usage
3838

39-
![2 single point sliders](assets/slider/slider_basic.png)
39+
![Continuous slider](assets/slider/slider_continuous.png){width="600"}
40+
![Discrete slider](assets/slider/slider_discrete.png){width="600"}
4041

4142
Add a `Slider` to a layout:
4243

@@ -79,7 +80,7 @@ API and source code:
7980
* [Class definition](https://developer.android.com/reference/com/google/android/material/slider/Slider)
8081
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/Slider.java)
8182

82-
![2 range sliders](assets/slider/slider_basic_range.png)
83+
![Range slider](assets/slider/slider_range.png)
8384

8485
A slider with two thumbs is called a range slider.
8586
Add a `RangeSlider` to a layout:
@@ -182,8 +183,8 @@ indicate magnitude (e.g.: 1.5K, 3M, 12B). That can be achieved through the
182183

183184
The following example shows a slider for a price range in USD currency.
184185

185-
!["Range slider with range of $0 to $100. Left thumb is set at $20, right thumb
186-
at $70."](assets/slider/slider_price.png)
186+
!["Range slider with range of $0 to $10. Left thumb is set at $2, right thumb
187+
at $7."](assets/slider/slider_price.png){width="400"}
187188

188189
In code:
189190

@@ -210,7 +211,7 @@ a specific value.
210211

211212
The following example shows a continuous slider.
212213

213-
!["Continuous sliders with pressed thumb valued at 20."](assets/slider/slider_cont.png)
214+
!["Continuous slider."](assets/slider/slider_continuous.png)
214215

215216
In the layout:
216217

@@ -229,7 +230,7 @@ In the layout:
229230

230231
The following example shows a continuous range slider.
231232

232-
!["Continuous range slider with left thumb at 20 and right thumb at 70."](assets/slider/slider_cont_range.png)
233+
!["Continuous range slider."](assets/slider/slider_range.png)
233234

234235
In the layout:
235236

@@ -251,7 +252,7 @@ allows a user to input an exact value.
251252

252253
The following example shows a discrete slider.
253254

254-
!["Discrete single point slider with pressed thumb at a value of 20."](assets/slider/slider_disc.png)
255+
!["Discrete single point slider."](assets/slider/slider_discrete.png)
255256

256257
In the layout:
257258

@@ -265,7 +266,7 @@ In the layout:
265266

266267
The following example shows a discrete range slider.
267268

268-
!["Discrete range slider with left thumb at 20 and right thumb at 70."](assets/slider/slider_disc_range.png)
269+
!["Discrete range slider."](assets/slider/slider_discrete_range.png){width="400"}
269270

270271
In the layout:
271272

@@ -282,10 +283,12 @@ slider also has tick marks.
282283

283284
![Slider anatomy diagram](assets/slider/slider_anatomy.png)
284285

285-
1. Track
286-
2. Thumb
287-
3. Value label (optional)
288-
4. Tick mark (discrete sliders)
286+
1. Value label (optional)
287+
2. Active track stop indicator
288+
3. Active track
289+
4. Thumb
290+
5. Inactive track
291+
6. Inactive track stop indicator
289292

290293
#### Track attributes
291294

@@ -296,7 +299,7 @@ slider also has tick marks.
296299
| **Step size (discrete)** | `android:stepSize` | `setStepSize`<br/>`getStepSize` | N/A |
297300
| **Initial selected value (Slider)** | `android:value` | `setValue`<br/>`getValue` | N/A |
298301
| **Initial selected values (RangeSlider)** | `app:values` | `setValues`<br/>`getValues` | N/A |
299-
| **Height** | `app:trackHeight` | `setTrackHeight`<br/>`getTrackHeight` | `4dp` |
302+
| **Height** | `app:trackHeight` | `setTrackHeight`<br/>`getTrackHeight` | `16dp` |
300303
| **Color** | `app:trackColor` | `setTrackTintList`<br/>`getTrackTintList` | `null` |
301304
| **Color for track's active part** | `app:trackColorActive` | `setTrackActiveTintList`<br/>`getTrackActiveTintList` | `?attr/colorPrimary` |
302305
| **Color for track's inactive part** | `app:trackColorInactive` | `setTrackInactiveTintList`<br/>`getTrackInactiveTintList` | `?attr/colorSurfaceContainerHighest` |
@@ -310,18 +313,18 @@ thing.
310313

311314
#### Thumb attributes
312315

313-
| Element | Attribute | Related method(s) | Default value |
314-
|------------------|-------------------------|-----------------------------------------------------------------------------------|-----------------------------|
315-
| **Color** | `app:thumbColor` | `setThumbTintList`<br/>`getThumbTintList` | `?attr/colorPrimary` |
316-
| **Width** | `app:thumbWidth` | `setThumbWidth`<br/>`setThumbWidthResource`<br/>`getThumbWidth` | `4dp` |
317-
| **Height** | `app:thumbHeight` | `setThumbHeight`<br/>`setThumbHeightResource`<br/>`getThumbHeight` | `44dp` |
318-
| **Radius** | `app:thumbRadius` | `setThumbRadiusResource`<br/>`setThumbRadius`<br/>`getThumbRadius` | `10dp` |
319-
| **Elevation** | `app:thumbElevation` | `setThumbElevationResource`<br/>`setThumbElevation`<br/>`getThumbElevation` | `2dp` |
320-
| **Halo color** | `app:haloColor` | `setHaloTintList`<br/>`getHaloTintList` | `?attr/colorPrimary` at 24% |
321-
| **Halo radius** | `app:haloRadius` | `setHaloRadiusResource`<br/>`setHaloRadius`<br/>`getHaloRadius` | `24dp` |
322-
| **Stroke color** | `app:thumbStrokeColor` | `setThumbStrokeColor`<br/>`setThumbStrokeColorResource`<br/>`getThumbStrokeColor` | `null` |
323-
| **Stroke width** | `app:thumbStrokeWidth` | `setThumbStrokeWidth`<br/>`setThumbStrokeWidthResource`<br/>`getThumbStrokeWidth` | `0dp` |
324-
| **Gap size** | `app:thumbTrackGapSize` | `setThumbTrackGapSize`<br/>`getThumbTrackGapSize` | `6dp` |
316+
| Element | Attribute | Related method(s) | Default value |
317+
|------------------|-------------------------|-----------------------------------------------------------------------------------|------------------------------|
318+
| **Color** | `app:thumbColor` | `setThumbTintList`<br/>`getThumbTintList` | `?attr/colorPrimary` |
319+
| **Width** | `app:thumbWidth` | `setThumbWidth`<br/>`setThumbWidthResource`<br/>`getThumbWidth` | `4dp` |
320+
| **Height** | `app:thumbHeight` | `setThumbHeight`<br/>`setThumbHeightResource`<br/>`getThumbHeight` | `44dp` |
321+
| **Radius** | `app:thumbRadius` | `setThumbRadiusResource`<br/>`setThumbRadius`<br/>`getThumbRadius` | N/A |
322+
| **Elevation** | `app:thumbElevation` | `setThumbElevationResource`<br/>`setThumbElevation`<br/>`getThumbElevation` | `2dp` |
323+
| **Halo color** | `app:haloColor` | `setHaloTintList`<br/>`getHaloTintList` | `@android:color/transparent` |
324+
| **Halo radius** | `app:haloRadius` | `setHaloRadiusResource`<br/>`setHaloRadius`<br/>`getHaloRadius` | N/A |
325+
| **Stroke color** | `app:thumbStrokeColor` | `setThumbStrokeColor`<br/>`setThumbStrokeColorResource`<br/>`getThumbStrokeColor` | `null` |
326+
| **Stroke width** | `app:thumbStrokeWidth` | `setThumbStrokeWidth`<br/>`setThumbStrokeWidthResource`<br/>`getThumbStrokeWidth` | `0dp` |
327+
| **Gap size** | `app:thumbTrackGapSize` | `setThumbTrackGapSize`<br/>`getThumbTrackGapSize` | `6dp` |
325328

326329
**Note:** `app:thumbWidth` and `app:thumbHeight` take precedence over `app:thumbRadius`.
327330

@@ -338,14 +341,14 @@ Element | Attribute | Related method(s)
338341

339342
#### Tick mark attributes
340343

341-
Element | Attribute | Related method(s) | Default value
342-
----------------------------------- | ------------------------ | ------------------------------------------------------- | -------------
343-
**Color** | `app:tickColor` | `setTickTintList`<br/>`getTickTintList` | `null`
344-
**Color for tick's active part** | `app:tickColorActive` | `setTickActiveTintList`<br/>`getTickActiveTintList` | `?attr/colorSurfaceVariant`
345-
**Color for tick's inactive part** | `app:tickColorInactive` | `setTickInactiveTintList`<br/>`getTickInactiveTintList` | `?attr/colorPrimary`
346-
**Radius for tick's active part** | `app:tickRadiusActive` | `setTickActiveRadius`<br/>`getTickActiveRadius` | `1dp`
347-
**Radius for tick's inactive part** | `app:tickRadiusInactive` | `setTickInactiveRadius`<br/>`getTickInactiveRadius` | `1dp`
348-
**Tick visible** | `app:tickVisible` | `setTickVisible`<br/>`isTickVisible()` | `true`
344+
| Element | Attribute | Related method(s) | Default value |
345+
|-------------------------------------|--------------------------|---------------------------------------------------------|--------------------------------------|
346+
| **Color** | `app:tickColor` | `setTickTintList`<br/>`getTickTintList` | `null` |
347+
| **Color for tick's active part** | `app:tickColorActive` | `setTickActiveTintList`<br/>`getTickActiveTintList` | `?attr/colorSurfaceContainerHighest` |
348+
| **Color for tick's inactive part** | `app:tickColorInactive` | `setTickInactiveTintList`<br/>`getTickInactiveTintList` | `?attr/colorPrimary` |
349+
| **Radius for tick's active part** | `app:tickRadiusActive` | `setTickActiveRadius`<br/>`getTickActiveRadius` | `1dp` |
350+
| **Radius for tick's inactive part** | `app:tickRadiusInactive` | `setTickInactiveRadius`<br/>`getTickInactiveRadius` | `1dp` |
351+
| **Tick visible** | `app:tickVisible` | `setTickVisible`<br/>`isTickVisible()` | `true` |
349352

350353
**Note:** `app:tickColor` takes precedence over `app:tickColorActive` and
351354
`app:tickColorInative`. It's a shorthand for setting both values to the same
@@ -364,6 +367,23 @@ See the full list of
364367
and
365368
[attributes](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/res/values/attrs.xml).
366369

370+
#### Non-Text Contrast update
371+
372+
In order to comply with the latest accessibility requirements, the
373+
`Slider` has been updated with additional attributes:
374+
375+
- `app:thumbTrackGapSize`: size of the gap between the thumb and the
376+
track, 6dp by default.
377+
- `app:trackInsideCornerSize`: size of the corners towards the thumb when a gap
378+
is present, 2dp by default.
379+
- `app:trackStopIndicatorSize`: size of the stop at the start/end of the track,
380+
4dp by default.
381+
382+
`*.Legacy` styles have been added to revert to the previous behavior (**not
383+
recommended**):
384+
385+
- `Widget.Material3.Slider.Legacy`
386+
367387
## Theming sliders
368388

369389
Sliders support
@@ -408,7 +428,7 @@ all sliders but does not affect other components:
408428
<item name="sliderStyle">@style/Widget.App.Slider</item>
409429
</style>
410430

411-
<style name="Widget.App.Slider" parent="Widget.Material3.Slider">
431+
<style name="Widget.App.Slider" parent="Widget.Material3.Slider.Legacy">
412432
<item name="materialThemeOverlay">@style/ThemeOverlay.App.Slider</item>
413433
<item name="labelStyle">@style/Widget.App.Tooltip</item>
414434
</style>

‎docs/components/assets/slider/slider_anatomy.png‎

8.84 KB
Loading

‎docs/components/assets/slider/slider_basic.png‎

-12.4 KB
Binary file not shown.

‎docs/components/assets/slider/slider_basic_range.png‎

-15.1 KB
Binary file not shown.

‎docs/components/assets/slider/slider_cont.png‎

-23.6 KB
Binary file not shown.

‎docs/components/assets/slider/slider_cont_range.png‎

-30.8 KB
Binary file not shown.

‎docs/components/assets/slider/slider_continuous.png‎

7.36 KB
Loading

‎docs/components/assets/slider/slider_disc.png‎

-21.7 KB
Binary file not shown.

‎docs/components/assets/slider/slider_disc_range.png‎

-27.4 KB
Binary file not shown.

‎docs/components/assets/slider/slider_discrete.png‎

8.49 KB
Loading

0 commit comments

Comments
 (0)