Slider

Slider label

100

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

Slider label

100

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)

Edit this page on GitHub

Components: Select

Slider: Usage