label

Sliders should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These sliders must still include an ARIA label in HTML, using either aria-label or aria-labelledby attributes depending on context.

labelPosition

Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long text, localization, and responsive layouts. Side labels are most useful when vertical space is limited.

value

The value is the number selected within the slider's range, from the min value to max value.

maxValue and minValue

The min and max values can also be customized appropriately for whatever the slider is showing. By default, the min value starts at 0 and the max value is set to 100.

isRange

More information about a design scenario, to use this option in the component.

step

The step is the increment by which these values increase or decrease. A step value of 1 (the default) lets a user only select whole numbers within the min and max range.

valueFormat

Sometimes a value needs to be formatted for localization or for clearer communication such as currencies or percentages. Formatting can involve rounding, mathematical transformations, number formatting, or displaying a prefix or suffix, such as "+/-" or "px."

progressionScale

Sliders use a linear progression scale by default which means that value is directly correlated to the position of the handle along the track. In some cases, sliders can use a logarithmic (log) progression scale, which is helpful when users need finer control over small values.

width

The width of a slider can be customized appropriately for its context.

hasFill

The track of the slider can have a fill. By default, the fill originates from the left side of the track.

fillStart

If the value represents an offset, the fill start can be set to represent the point of origin. This allows the slider fill to start from inside the track.

hasGradient

A gradient can be added to the track of any slider to give more meaning to the range of values. Tracks with a gradient can also have a fill. A gradient track should not be used for choosing a precise color; use a color slider, color area, or color wheel instead.

isEditable

In situations where users should be able to precisely input a value, the value can be editable within a text field.

isDisabled

A disabled slider shows that an input exists but is not available in the current context. This helps maintain layout continuity and signals that the slider may become available later.