<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>
<Rangeid="myRange"name="numberOfPets"isRequired={true}labelHtml={{ en: 'How many pets do you have?' }}hintHtml={{ en: '' }}validationErrorRequiredHtml={{ en: 'Required' }}validationErrorInvalidHtml={{ en: 'Invalid' }}min={0}minLabelHtml={{ en: 'min' }}max={100}maxLabelHtml={{ en: 'max' }}step={1}tagsById={[]}/>
<Range>
's props
Prop | About | Type |
---|---|---|
hideInAnswerSummary | Whether to hide any answers below this. | boolean |
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 |
labelHelpPopoutContentButtonLabel | Localisable text: Popout Content button label | LocalisedPlainText |
labelHelpPopoutContentModalContentHtml | Localisable text: Popout Content modal title | LocalisedHtml |
labelHelpPopoutContentModalHeadingHtml | Localisable text: Popout Content modal title | LocalisedHtml |
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. | string |
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" |