<Range>







Displays a range slider input field where the user can drag a handle indicating a number between a range.
Required
Unfortunately there isn't a conventional way of indicating to screen readers that range fields can be required. The required
and aria-required
attributes aren't valid for ranges (as of the time of writing in late 2022 the input types that can be required are:
text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
)
Use of <Range>
<Range>
's props
Prop | About | Type |
---|---|---|
hideValue | Whether to hide the value before the range slider. | boolean |
hintHtml | Localisable HTML: Hint content. | LocalisedHtml |
isRequired | Whether users are required to fill in this form field. This setting affects | boolean |
labelHtml | Localisable HTML: Label content. | LocalisedHtml |
max | The maximum valid value | number |
maxLabelHtml | Localisable HTML: Maximum value axis label E.g.
| LocalisedHtml |
min | The minimum valid value | number |
minLabelHtml | Localisable HTML: Minimum value axis label E.g.
| LocalisedHtml |
name | The Name of the form control. Submitted with the form as part of a name:value pair in the | string |
step | The Either a number which indicates valid increments, or E.g.
| number | "all" |
tagsById | List of tags by id. Should align with ids in | string[] |
validationErrorInvalidHtml | Localisable HTML: invalid validation content | LocalisedHtml |
validationErrorRequiredHtml | Localisable HTML: required validation content | LocalisedHtml |
id | Component Id. Must be unique within the form. | string |
meta | Arbitrary metadata on this node. This is useful when developing custom controls as it allows you to pass down metadata/extensions. | MetaData |
hasChildrenById | Non-editable. Used to indicate that this component doesn't have children. | false |
hasTagsById | Non-editable. Used to indicate that this component has tags by id. | true |
isFormField | Non-editable. Used to indicate that this component is a form field. | true |
isMultichoice | Non-editable. Used to indicate that this component isn't a multichoice form field like | false |
type | Non-editable. Type of component of | "Range" |