Slider

Slider

An input range slider lets the user specify a numeric value which must be between two specified values.

Base

Preview

About Slider

The slider component is built using a native input form element with the attribute type of "range".

Implementation Notes and Requirements

  • slds-slider should be applied to the div containing both the <input> and the <span> that holds the value of the <input>
  • slds-slider__range should be applied to the <input> element
    • The <input> should have a unique ID that matches the for attribute on the form element <label>
  • The slds-slider__range element can accept 4 atrributes that describe the input range:
    • value: Current value of the input range
    • min: Minimum value of a specified range
    • max: Maximum value of a specified range
    • step: Indicates the granularity that is expected by limiting the allowed values
  • The slds-slider__value span should be updated with the current value of the <input>
  • The slds-slider__value element must have aria-hidden=true to hide from screen readers as they understand that value already from the <input>
  • The class slds-assistive-text can be placed on the <label>, or either <span> within the <label>, to visually hide the either value (or both).

Overview of CSS Classes

Selector.slds-slider
Summary

Initializes slider component

Restrictdiv
VariantTrue
Selector.slds-slider__value
Summary

Element that contains value of input range

Restrict.slds-slider span
Selector.slds-slider_vertical
Summary

Modifier that makes the slider vertical

Restrict.slds-slider
ModifierTrue