<Range>

Skip past table of contents

Search

Table of contents

Start of documentation content

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

  id="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

PropAboutType
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 aria-required and whether a * is displayed next to the form field, etc.

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.

{
  en: 'Largest dog weight (<abbr title="kilograms">kg</abbr>)'
}
LocalisedHtml
min

The minimum valid value

number
minLabelHtml

Localisable HTML: Minimum value axis label

E.g.

{
  en: 'Smallest dog weight (<abbr title="kilograms">kg</abbr>)'
}
LocalisedHtml
name

The name attribute in HTML (MDN name attribute)

Name of the form control.

Submitted with the form as part of a name:value pair in the <Formally onSubmit> callback prop valuesAsFormNames.

string
step

The step attribute of an <input type="range"> in HTML (MDN step attribute).

Either a number which indicates valid increments, or all to indicate that all values are valid.

E.g.

  • a step of 2, with a min/max of 0/10, would mean valid increments of 0, 2, 4, 6, 8, 10.
  • a step of all, with a min/max of 0/10, would mean valid increments of any number between 0 and 10 (as well as 0 and 10 themselves).
number | "all"
tagsById

List of tags by id. Should align with ids in <Root>.

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 <Select>, <Radios> or <Checkboxes>.

false
type

Non-editable.

Type of component of "Range".

"Range"