Skip to main contentCarbon Design System

Slider

Slider

Vanilla JS
Code:
<!--
  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">
  <label class="bx--label ">
    Slider label
  </label>
  <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="25">
    </div>
    <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" value="25">
  </div>
</div>

Slider disabled

Code:
<!--
  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">
  <label class="bx--label bx--label--disabled">
    Slider label
  </label>
  <div class="bx--slider-container">
    <label id="slider-input-box_bottom-range-label" class="bx--slider__range-label">0</label>
    <div class="bx--slider  bx--slider--disabled" 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="50">
    </div>
    <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" value="50">
  </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)