Range Slider (range_slider)

A range slider allows users to choose an approximate number from a range.

🔗 External documentation.

ID Label Description Schema
min Min Minimum number of range.
                        type: number

                      
max Max Maxium number of range.
                        type: number

                      
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.”
                        type: string

                      
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.
                        type: string

                      
            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

          
<input class="["usa-range"]" data-text-preposition="of" data-text-unit="stars" max="10" min="1" type="range" />