Slider

The slider component allows users to visualize a relative amount or portion of a whole. The slider should be implemented when users are required to set a value that falls within a bounded range in order to provide visual feedback about where that value falls. Sliders can have a discrete or continuous scale, depending on the use case. Continuous scales simply rely on a min and max value whereas discrete scales allow users to snap to specific values.

Use cases for sliders can vary a great deal, but some examples include:

Setting storage size, memory limit, or other configuration options
Setting a time range on a chart
Setting price ranges or other filters

Slider Example

Image of Slider

Slider

Image of Slider 1

Label: There should be a slider label to the left of the slider, indicating what the slider values represent. A text string or an icon may be used in the label position.
Slider Handle:
- The slider handle should sit on the selected value.
- The slider handle should move when users click and drag, when users click on a new area along the slide, and when users enter a new value in the field input.
- For discrete sliders, the handle should snap to the closest tic mark value.
- The slide area to the left of the handle should be highlighted in blue, with the slide area to the right in grey.
Tooltip: The current value should be displayed in a tooltip when users hover or click on the slider handle.
Numeric Scale (optional):
- A numeric scale may be displayed below the slider.
- Displaying a numeric scale is recommended when using a discrete slider that snaps to specific values.
- Note: The scale is not required to denote ALL discrete values.
Discrete Values (optional): When using a discrete scale, each available value may be indicated using marks along the slider. The marks make it clear to users when the slider will snap to specific values.
Field Input (optional): The slider can optionally have a field input on the right side to enter the desired value as an alternative to sliding. The slider button should move to indicate the value entered.
Unit Dropdown (optional): A dropdown may be provided in conjunction with the field input if various units are available for selection.

Slider Examples

Image of Slider 3

Slider Example In Context

Image of Slider 3

Future Considerations

Sliders with two draggable handles, allowing users to set a range
Vertical sliders
Sliders with interactive buttons, allowing users to jump to specific values without dragging the slider handle

View Angular PatternFly Example
View PatternFly NG Example
View PatternFly React Example

PatternFly Core Example

Examples

Example of a slider in a form

0 100 GB

0 100

Reference Markup

<script src="components/bootstrap-slider/dist/bootstrap-slider.js"></script>
<input id="slider-one" type="text"
data-provide="slider"
data-slider-min="0"
data-slider-max="100"
data-slider-tooltip="show" />

<br>
<br>

<input id="slider-two" type="text"
data-provide="slider"
data-slider-ticks="[1, 2, 3, 4, 5]"
data-slider-ticks-labels='["1", "2", "3", "4", "5"]'
data-slider-min="1"
data-slider-max="5"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="show" />

<h2>Example of a slider in a form</h2>
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="size" class="col-sm-2 control-label">Size</label>
    <div class="col-sm-10">
      <input id="slider" type="text"
      data-provide="slider"
      data-slider-ticks="[1, 2, 3, 4, 5]"
      data-slider-ticks-labels='["1", "2", "3", "4", "5"]'
      data-slider-min="1"
      data-slider-max="5"
      data-slider-step="1"
      data-slider-value="3"
      data-slider-tooltip="show" />
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name">
    </div>
  </div>

  <div class="form-group">
    <label for="size" class="col-sm-2 control-label">Size</label>
    <div class="col-sm-10">
      <div class="slider-pf">
        <b>0</b>
        <input id="size" type="text"
        data-provide="slider"
        data-slider-min="0"
        data-slider-max="100"
        data-slider-tooltip="show" />
        <b>100</b>
        <input type="text" size="3" class="slider-input-pf">
        <span>GB</span>
      </div>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

<br>
<br>

<div class="slider-pf">
  <b>0</b>
  <input id="slider-pf" type="text"
  data-provide="slider"
  data-slider-min="0"
  data-slider-max="100"
  data-slider-tooltip="show" />
  <b>100</b>
  <input type="text" size="3" class="slider-input-pf">
  <span>GB</span>
</div>

<br>
<br>

<div class="slider-pf">
  <b>0</b>
  <input id="with-stops" type="text"
  data-provide="slider"
  data-slider-min="0"
  data-slider-max="100"
  data-slider-tooltip="show" />
  <b>100</b>
  <input type="text" size="3" class="slider-input-pf">
  <span class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      GB
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#">GB</a></li>
      <li><a href="#">MB</a></li>
    </ul>
  </span>
</div>
<script>
  $(function () {
    $('.slider-input-pf').tooltip({ trigger: 'manual' })
      .on('keyup', function (e) {
        var $this = $(this);
        var sd = $this.siblings('[data-provide=slider]').slider();
        if ($this.val().trim() !== '' && !$.isNumeric(this.value)) {
          this.value = sd.slider('getValue');
        }
      })
      .on('keypress blur', function (e) {
        if (e.which == 13 || e.type === 'blur') {
          e.preventDefault();
          var $this = $(this);
          var sd = $this.siblings('[data-provide=slider]').slider();
          var max = sd.slider('getAttribute', 'max');
          var min = sd.slider('getAttribute', 'min');
          if (!$.isNumeric(this.value) || (this.value > max || this.value < min)) {
            var warningInfo = $.isNumeric(this.value) ? 'Valid value should be between ' + min
              + ' and ' + max : 'Valid value should be number';
            $this.attr('data-original-title', warningInfo).tooltip('show').addClass('warning');
            this.value = sd.slider('getValue');
            setTimeout(function(){ $this.tooltip('hide'); }, 3000);
          } else {
            if ($this.is('.warning')) {
              $this.tooltip('hide');
            }
            this.value = $this.val().trim();
            sd.slider('setValue', this.value);
          }
        }
      })
      .siblings('[data-provide=slider]').each(function () {
        $(this).siblings('.slider-input-pf').val(this.value);
        $(this).slider().on('slide', function (e) {
          $(e.target).siblings('.slider-input-pf').val(e.value);
        });
      });
  });
</script>