Range Slider (range_slider
)
A range slider allows users to choose an approximate number from a range.
ID | Label | Description | Schema |
---|---|---|---|
min | Min | Minimum number of range. |
|
max | Max | Maxium number of range. |
|
data_text_unit | data-text-unit | Adds a unit to screen reader callouts. The unit will be read after the current value. For example, adding a value of “stars” enables a readout like “3.5 stars of 5.” |
|
data_text_preposition | data-text-preposition | Changes the preposition between current value and max value in screen reader readouts. For example, adding a value with the Spanish translation “de” enables a readout “like 20 de 100”. When adding a range slider to a non-English page, be sure to update the preposition as necessary. |
|
id: range_slider
label: 'Range Slider'
description: 'A range slider allows users to choose an approximate number from a range.'
group: Forms
homepage: 'https://designsystem.digital.gov/components/range-slider/'
props:
min:
id: min
label: Min
description: 'Minimum number of range.'
schema:
type: number
max:
id: max
label: Max
description: 'Maxium number of range.'
schema:
type: number
data_text_unit:
id: data_text_unit
label: data-text-unit
description: 'Adds a unit to screen reader callouts. The unit will be read after the current value. For example, adding a value of “stars” enables a readout like “3.5 stars of 5.”'
schema:
type: string
data_text_preposition:
id: data_text_preposition
label: data-text-preposition
description: 'Changes the preposition between current value and max value in screen reader readouts. For example, adding a value with the Spanish translation “de” enables a readout “like 20 de 100”. When adding a range slider to a non-English page, be sure to update the preposition as necessary.'
schema:
type: string
examples:
preview:
id: preview
label: Preview
renderable:
'@component': range_slider
min: 1
max: 10
data_text_unit: stars
data_text_preposition: of