Carbon Design System

Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.

Experimental Slider

Slider label 100

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--form-item">
  <div class="bx--slider-container">
    <label id="slider-input-box_bottom-range-label" class="bx--slider__range-label">0</label>
    <div class="bx--slider" data-slider data-slider-input-box="#slider-input-box">
      <div class="bx--slider__thumb" tabindex="0"></div>
      <div class="bx--slider__track"></div>
      <div class="bx--slider__filled-track"></div>
      <input aria-label="slider" id="slider" class="bx--slider__input" type="range" step="1" min="0" max="100" value="0">
    </div>
      <label class="bx--label">Slider label</label>
    <label id="slider-input-box_top-range-label" class="bx--slider__range-label">100</label>
    <input id="slider-input-box" aria-labelledby="slider-input-box_bottom-range-label slider-input-box_top-range-label" type="number" class="bx--text-input bx--slider-text-input" placeholder="0">
  </div>
</div>

Documentation

SCSS

Modifiers

Use these modifiers with .bx--slider class.

Selector	Description
.bx--slider--disabled	Applies disabled styling and prevents JS from running on user input

Javascript

Options

Option	Default Selector	Description
`selectorInit`	`[data-slider]`	The selector to find the Slider element.
`selectorTrack`	`.bx--slider__track`	The selector to find the Slider track element.
`selectorFilledTrack`	`.bx--slider__filled-track`	The selector to find the Slider filled track element.
`selectorThumb`	`.bx--slider__thumb`	The selector to find the Slider thumb element.
`selectorInput`	`.bx--slider__input`	The selector to find the Slider input element.
`eventBeforeSliderValueChange`	`slider-before-value-change`	The event emitted before the Slider value changes.
`eventAfterSliderValueChange`	`slider-after-value-change`	The event emitted when the Slider value changes.
`stepMultiplier`	`4`	The multiplier applied to arrow key inputs when the shift key is pressed.

FAQ

Keydown event

Once Slider instance is initialized a user can use the following keys to control the slider.

up and right arrow keys increase the slider value by one step
down and left arrow keys decrease the slider value by one step
Pressing shift while changing the value of the slider will multiple the change by Slider.options.stepMultiplier (the default is 4)