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

Slider Label0 - 100

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 Salesforce native mobile applications. 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.

Select a device to set the width of the example

Base#

Slider Label0 - 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-2">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

States#

Disabled#

Slider Label0 - 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-3">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Value: 0#

Slider Label0 - 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-3">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Value: 25#

Slider Label0 - 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-3">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Value: 50#

Slider Label0 - 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-3">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Value: 75#

Slider Label0 - 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-3">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Value: 100#

Slider Label0 - 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-3">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Examples#

Min/Max Range#

Slider Label0 - 400

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-4">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Min/Max Range with Steps#

Slider Label0 - 400

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-4">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Width: x-small#

Slider Label0 - 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-4">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Width: small#

Slider Label0 - 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-4">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Width: medium#

Slider Label0 - 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-4">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Width: large#

Slider Label0 - 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-4">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Error#

Slider Label0 - 100

There is a problem with this field

<div class="slds-form-element slds-has-error">
  <label class="slds-form-element__label" for="slider-id-4">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Modifiers#

Vertical#

Slider Label0 - 100

<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-4">
    <span class="slds-slider-label">
      <span class="slds-slider-label__label">Slider Label</span>

Styling Hooks Overview#

Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.

Category	Styling Hook Name	Value Type(s)	Fallback Value
Box Shadow	`--slds-c-slider-thumb-shadow`	String	10, rgba(0, 0, 0, 0.16) 0 2px 3px
Box Shadow	`--slds-c-slider-thumb-shadow-focus`	String	0 0 3px #0176d3
Color	`--slds-c-slider-thumb-color-foreground`	Color	#0176d3
	`--slds-c-slider-thumb-color-foreground-active`	Color	#014486
	`--slds-c-slider-thumb-color-foreground-focus`	Color	#014486
	`--slds-c-slider-thumb-color-foreground-hover`	Color	#014486
	`--slds-c-slider-track-color-background`	Color	95, #f3f3f3
Radius	`--slds-c-slider-thumb-radius-border`	Dimension	50%
Radius	`--slds-c-slider-track-radius-border`	Dimension	0.125rem

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-slider`
Summary	Initializes slider component
Support	dev-ready
Restrict	`div`
Variant	True

Selector	`.slds-slider__range`
Summary	Range track for slider
Restrict	`.slds-slider input`

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`
Modifier	True

Slider Release Notes

2.21.0

Added

Added unique id to fix duplicate-id-aria wcag issue

2.17.0

Added

Added slds as the default namespace with sds fallbacks for Styling Hooks.
Added CSS Custom Property reassignments for variants and states (e.g., focus, active, hover).

2.14.0

Added

Enabled styling hooks for slider. See slider's styling hooks overview table for a full listing of the currently available hooks.

2.11.7

Added

Added documentation and examples for mobile/touch context

2.11.0

Changed

For mobile devices:
- Increased the tap target size of the slider thumb to $height-tappble (2rem) for increased usability.
- Minor layout and spacing adjustments to account for the larger slider thumb

2.7.0

Fixed

Fixed a bug that prevented Slider background from appearing in IE11.

Sections

About Slider#

Implementation#

Mobile#

Base#

States#

Disabled#

Value: 0#

Value: 25#

Value: 50#

Value: 75#

Value: 100#

Examples#

Min/Max Range#

Min/Max Range with Steps#

Width: x-small#

Width: small#

Width: medium#

Width: large#

Error#

Modifiers#

Vertical#

Styling Hooks Overview#

Overview of CSS Classes#

What are these categories?

Slider Release Notes

2.21.0

Added

2.17.0

Added

2.14.0

Added

2.11.7

Added

2.11.0

Changed

2.7.0

Fixed