<Range>

Search

Table of contents

Displays a range slider input field where the user can drag a handle indicating a number between a range.

Use of <Range>

<Range
  name="email"
  isRequired={true}
  labelHtml={{ en: 'Email' }}
  hintHtml={{ en: 'E.g. user@example.com' }}
  validationErrorRequiredHtml={{ en: 'Required' }}
  validationErrorInvalidHtml={{ en: 'Invalid' }}
  min={0}
  minLabelHtml={{ en: 'min' }}
  max={10}
  maxLabelHtml={{ en: 'max' }}
  step={1}
  tagsById={[]}
/>

<Range>'s props

PropAboutType
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
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
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"