slider

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

About Slider

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

Implementation

  • 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 attributes 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).

Mobile

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, sliders will have an increased size to accommodate using a finger instead of the more precise mouse cursor.

Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in the appropriate context. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.

Base

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

States

Disabled

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Value: 0

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Value: 25

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Value: 50

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Value: 75

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Value: 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Examples

Min/Max Range

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Min/Max Range with Steps

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Width: x-small

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Width: small

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Width: medium

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Width: large

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Error

There is a problem with this field
<div class="slds-form-element slds-has-error">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">

Modifiers

Vertical

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
    <span class="slds-slider-label">