Examples
Use when a single value between 0 and 100
needs to be selected.
A range slider is an input field that merchants can use to select a numeric value within a given range (minimum and maximum values).
Use when a single value between 0 and 100
needs to be selected.
The range slider provides a large click and tap target for the slider thumbs. Merchants can also tap or click on the slider track to move the closest slider thumb.
The default range slider component uses the ARIA 1.1 slider pattern to build upon the default HTML <input type="range">
. The required label
prop provides a label for the field that’s conveyed to assistive technologies when it receives focus. When the slider is used, the value
prop should update visually and programmatically to reflect the current value.
To consistently provide the current value to assistive technologies, use the min
and max
props to provide the minimum and maximum values for the slider.
The dual-thumb range slider component uses the ARIA 1.1 slider (multi-thumb) pattern. However, the pattern isn’t consistently supported by screen readers, especially on mobile devices. Because of this, it’s best to pair the dual-thumb slider with a set of text fields for each value, or to provide another accessible method for entering information.
Use when a single value between 0 and 100
needs to be selected.
See Material Design and development documentation about accessibility for Android:
Use when a single value between 0 and 100
needs to be selected.
See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
Range sliders should:
hidden
.A label is a short description of the requested input. Labels are not instructional text but they should be meaningful and clearly indicate what is expected. Labels should be:
Saturation percentage
Banner width
What is the saturation value?
The banner width is:
Try to only ask for information that’s required. If you need to ask merchants to provide optional information, mark the field optional by placing the text “(optional)” at the end of the field’s label. Don’t mark required fields with asterisks.
Banner width (optional)
Banner width
Help text provides extra guidance or instruction to people filling out a form field. It can also be used to clarify how the information will be used. As with all form content, help text should be succinct and easy to read.
Video duration is calculated in seconds
Example: 134 seconds
Error messages should:
Video duration is required
You didn’t enter a duration