Slider

Usage

The slider allows a user to quickly select a single value within a range (such as a volume control), or a custom range (such as an odometer filter) with a click/drag gesture rather than slower, more motor-intensive typing.

Sliders are most useful for quick approximations. When greater precision is required, consider using a text input or combo box input.

Sliders may have an optional 2nd thumb.

Common Characteristics

All sliders include a track, one or two thumbs, a label, and a value or range of values.

All sliders indicate the selected range with dark color, and the excluded range with light color.

The low end of the range is always on the left.

MIN Condition Grade

2.5

MAX Condition Grade

2.5

These two sliders are functionally identical, even though the label and selected range are expressed differently.

Interaction and Accessibility

To ensure accessibility, the user can tap anywhere on the track to set the thumb, or drag the thumb along the track, or use the keyboard left/right arrows when the thumb is focused.

States

Slider thumbs can be enabled, hovered/focused, or disabled.

Variants

Single Thumb

A slider with a single thumb can be used to exclude high values or low values.

MIN Condition Grade

1

This slider excludes low values by sliding to the right.

MAX Odometer

40,000

This slider excludes high values by sliding to the left.

Two Thumbs

Odometer

1,000 - 4,000

This slider excludes low and high values.

Code

Default Slider

Live Editor

<Slider defaultValue={50} labelUnitOfMeasure={"Km"} labelAlignment={'right'} label={'MAX distance'} disabled={false} onChange={(value) => { console.log(`on change! ${value}`) }} onChangeCommitted={(value) => { console.log(`on change committed! ${value}`) }} />

    <Slider
        defaultValue={50}
        labelUnitOfMeasure={"Km"}
        labelAlignment={'right'}
        label={'MAX distance'}
        disabled={false}
        onChange={(value) => {
            console.log(`on change! ${value}`)
        }}
        onChangeCommitted={(value) => {
            console.log(`on change committed! ${value}`)
        }}
    />

Result

Loading...

Slider with Range

Live Editor

<Slider defaultValue={[0, 100000]} max={100000} label="Odometer" />

       <Slider
            defaultValue={[0, 100000]}
            max={100000}
            label="Odometer"
        />

Result

Loading...

Sliders with inverted/disabled tracks

Live Editor

<> <Slider defaultValue={50}/> <Slider defaultValue={[15, 85]} /> <div style={{margin: '64px 0', borderTop: '2px solid lightgray'}}/> <Slider invertedTrack defaultValue={50}/> <div style={{margin: '64px 0', borderTop: '2px solid lightgray'}}/> <Slider disabled defaultValue={50}/> <Slider disabled defaultValue={[15, 85]} /> </>

    <>
        <Slider defaultValue={50}/>
        <Slider defaultValue={[15, 85]} />
        <div style={{margin: '64px 0', borderTop: '2px solid lightgray'}}/>
        <Slider invertedTrack defaultValue={50}/>
        <div style={{margin: '64px 0',  borderTop: '2px solid lightgray'}}/>
        <Slider disabled defaultValue={50}/>
        <Slider disabled defaultValue={[15, 85]} />
    </>

Result

Loading...