Skip Navigation

Sliders

Sliders allow users to select a single value or multiple values from a defined range.

Available in React

Indeterminate Example


When to Use

  • Use an indeterminate slider for subjective settings that focus on intensity rather than a specific value. For example, volume settings or screen brightness.

Examples

Usage

  • The lowest value occurs on the left. Greater values progress to the right.
  • Labels appear clearly above sliders. Accompanying form fields appear below.
  • The slider mechanism and the value displayed in any corresponding input field/s always adjusts interdependently.

Examples

Alternate Indeterminate Slider


When to Use

  • Use the alternate indeterminate slider when there are multiple sliders on a screen or panel and/or when there is no need to give visual prominence a slider.

Single Value Text Input Slider Example

A variation of a single input slide, this version allows the user to either enter a value into a text input field, or use the knob to adjust the value. When the user selects the slider control the form field dynamically adjusts in sync with the slider.


When to Use

  • Use a single value slider to allow users to specify a single value within a defined range.

Single Integrated Value Example

An integrated slider displays the value of the slider within the slider mechanism itself. This version is preferred in touch contexts. It can also be used when there is limited space and the value itself is not a large number.


When to Use

  • Use this version when a specific numeric value is being selected and the when the user may prefer to type in a value.

Multiple Values Slider


When to Use

  • Use a dual slider to allow the user to select a specific range from a predetermined set of numerical values.
  • Use this version when the user is selecting a lower and upper value to define a range.

Alternate Multiple Values Slider Example


Multiple Range Slider Example


When to Use

  • Use a multiple range slider to select two sequential ranges within a specific range of values.

Slider Error Example

Please complete the required field
Please complete the required field


Developer Notes

Use of the slider requires a JavaScript helper. It can be instantiated using new Spark.Slider(el). Sliders with multiple points can be instantiated using new Spark.RangeSlider(el).

Sliders implement the Messaging and Validation mixins, and provide mechanisms for getting and setting their values.

Order Matters

The <input> element must be before the controls, otherwise the disabled state will not work properly.

The following options may be passed when using new Spark.Slider(el, {}); or new Spark.RangeSlider(el, {});:

Name Type Default Description
validate function null A function to run to validate the state of the input. It should call onValidate with the parameters outlined below.
onValidate function null A callback function run after validation has completed. Callback arguments are isValid, newValue, instance.
onChange function null A callback function run when the input value changes. Callback arguments are newValue, instance.
onWillChange function null A callback function run whenver a slider is moved. Callback arguments are newValue, instance. Returning a number from this callback will cause that value to be set instead of whatever is returned by newValue.

For all available methods and full API, refer to the Slider API and Range Slider API documentation.

Indeterminate Slider

Option 1

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider">
    <label id="slider-label-1" class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="4">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="4" aria-valuetext="4" aria-labelledby="slider-label-1"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider">
    <label id="slider-label-2" class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="30" step="5">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="30" aria-valuetext="30" aria-labelledby="slider-label-2"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider">
    <label id="slider-label-3" class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="23" disabled>
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" tabindex="-1" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="23" aria-valuetext="23" aria-labelledby="slider-label-3"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-slider');
var sliderInstance = new Spark.Slider(el);

Option 2

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider spark-slider--secondary">
    <label id="slider-label-6" class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="4">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="4" aria-valuetext="4" aria-labelledby="slider-label-6"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider spark-slider--secondary">
    <label id="slider-label-7" class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="30" step="5">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="30" aria-valuetext="30" aria-labelledby="slider-label-7"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider spark-slider--secondary">
    <label id="slider-label-8" class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="23" disabled>
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" tabindex="-1" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="23" aria-valuetext="23" aria-labelledby="slider-label-8"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-slider');
var sliderInstance = new Spark.Slider(el);

Callback Functions:

  • Two provided callback function: onChange and onWillChange.
  • Callback functions can be configured by parameters in constructor: var sliderInstance = new Spark.Slider(el, {onChange: function(){...}, onWillChange:function(){...}}).
  • onChange will trigger once when finish moving the slider or change the value of input. Arguments of onChange will be instance of the slider and current value.
  • onWillChange will trigger when moving the slider or change the value of input. Arguments of onWillChange will be instance of the slider and current value.
  • onWillChange can have a number return value which will directly set the value of slider after onWillChange trigger.

Single Value Slider

Option 1

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider--input">
    <label id="slider-label-9" class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="4" id="slider-input-1">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="4" aria-valuetext="4" aria-labelledby="slider-label-9" aria-controls="slider-input-1"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider--input">
    <label id="slider-label-10" class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="30" step="5" id="slider-input-2">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="30" aria-valuetext="30" aria-labelledby="slider-label-10" aria-controls="slider-input-2"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider--input">
    <label id="slider-label-11" class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="23" disabled id="slider-input-3">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" tabindex="-1"  role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="23" aria-valuetext="23" aria-labelledby="slider-label-11" aria-controls="slider-input-3"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-slider--input');
var sliderInstance = new Spark.Slider(el);

Option 2

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider--integrated">
    <label id="slider-label-12" class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="4">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="4" aria-valuetext="4" aria-labelledby="slider-label-12"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider--integrated">
    <label id="slider-label-13" class="spark-label">Slider Label</label>
    <input type="number" min="-10" max="30" value="20" step="5">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" role="slider" aria-orientation="horizontal" aria-valuemin="-10" aria-valuemax="30" aria-valuenow="20" aria-valuetext="20" aria-labelledby="slider-label-13"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider--integrated">
    <label id="slider-label-14" class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="23" disabled>
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" tabindex="-1" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="23" aria-valuetext="23" aria-labelledby="slider-label-14"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-slider--integrated');
var sliderInstance = new Spark.Slider(el);

Values greater than 1,000 will be truncated to something like “1k”, but integrated sliders should not be used with numerical values in excess of 3 digits due to space constraints. If you use an integrated slider for large values, don’t expect precise results.

Multiple Values Slider

Option 1

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-range-slider">
    <label class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="10" title="Start" aria-label="Start" id="spark-range-slider-1">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-20" max="30" value="20" title="End" aria-label="End" id="spark-range-slider-2">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" title="Start" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="10" aria-valuetext="10" aria-label="Start" aria-controls="spark-range-slider-1"></button>
      <button class="spark-slider__handle" title="End" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="20" aria-valuetext="20" aria-label="End" aria-controls="spark-range-slider-2"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-range-slider">
    <label class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="10" step="5" title="Start" aria-label="Start" id="spark-range-slider-3">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-20" max="30" value="20" step="5" title="End" aria-label="End" id="spark-range-slider-4">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" title="Start" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="10" aria-valuetext="10" aria-label="Start" aria-controls="spark-range-slider-3"></button>
      <button class="spark-slider__handle" title="End" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="20" aria-valuetext="20" aria-label="End" aria-controls="spark-range-slider-4"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-range-slider">
    <label class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="10" disabled title="Start">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-20" max="30" value="20" disabled title="End">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" title="Start" tabindex="-1" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="10" aria-valuetext="10" aria-label="Start" aria-controls="spark-range-slider-5"></button>
      <button class="spark-slider__handle" title="End" tabindex="-1" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="20" aria-valuetext="20" aria-label="End" aria-controls="spark-range-slider-6"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-range-slider');
var sliderInstance = new Spark.RangeSlider(el);

Option 2

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-range-slider spark-slider--secondary">
    <label class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="20" value="10" title="Start" aria-label="Start" id="spark-range-slider-7">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-10" max="30" value="20" title="End" aria-label="End" id="spark-range-slider-8">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" title="Start" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="20" aria-valuenow="10" aria-valuetext="10" aria-label="Start" aria-controls="spark-range-slider-7"></button>
      <button class="spark-slider__handle" title="End" role="slider" aria-orientation="horizontal" aria-valuemin="-10" aria-valuemax="30" aria-valuenow="20" aria-valuetext="20" aria-label="End" aria-controls="spark-range-slider-8"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-range-slider spark-slider--secondary">
    <label class="spark-label">Slider Label</label>
    <input type="number" min="-3" max="2" value="1" step="0.5" title="Start" aria-label="Start" id="spark-range-slider-9">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-2" max="3" value="1.5" step="0.05" title="End" aria-label="Start" id="spark-range-slider-10">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" title="Start" role="slider" aria-orientation="horizontal" aria-valuemin="-3" aria-valuemax="2" aria-valuenow="1" aria-valuetext="1" aria-label="Start" aria-controls="spark-range-slider-9"></button>
      <button class="spark-slider__handle" title="End" role="slider" aria-orientation="horizontal" aria-valuemin="-2" aria-valuemax="3" aria-valuenow="1.5" aria-valuetext="1.5" aria-label="End" aria-controls="spark-range-slider-10"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-range-slider spark-slider--secondary">
    <label class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="20" value="10" disabled title="Start" aria-label="Start" id="spark-range-slider-11">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-10" max="30" value="20" disabled title="End" aria-label="Start" id="spark-range-slider-12">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" tabindex="-1" title="Start" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="20" aria-valuenow="10" aria-valuetext="10" aria-label="Start" aria-controls="spark-range-slider-11"></button>
      <button class="spark-slider__handle" tabindex="-1" title="End" role="slider" aria-orientation="horizontal" aria-valuemin="-10" aria-valuemax="30" aria-valuenow="20" aria-valuetext="20" aria-label="End" aria-controls="spark-range-slider-12"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>


<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-range-slider');
var sliderInstance = new Spark.RangeSlider(el);

The order of the <input> elements corresponds to the order of the handles, so the first <input> will be tied to the first element with a class of .spark-slider__handle. step will force the slider to move in increments.

Multiple Range Slider

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-range-slider">
    <label class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="0" title="Start" aria-label="Start" id="spark-range-slider-13">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-20" max="30" value="12" title="Middle" aria-label="Middle" id="spark-range-slider-14">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-20" max="30" value="20" title="End" aria-label="End" id="spark-range-slider-15">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" title="Start" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="0" aria-valuetext="0" aria-label="Start" aria-controls="spark-range-slider-13"></button>
      <button class="spark-slider__handle" title="Middle" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="12" aria-valuetext="12" aria-label="Middle" aria-controls="spark-range-slider-14"></button>
      <button class="spark-slider__handle" title="End" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="20" aria-valuetext="20" aria-label="End" aria-controls="spark-range-slider-15"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-range-slider">
    <label class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="0" step="5" title="Start" aria-label="Start" id="spark-range-slider-16">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-20" max="30" value="12" step="5" title="Middle" aria-label="Middle" id="spark-range-slider-17">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-20" max="30" value="20" step="5" title="End" aria-label="End" id="spark-range-slider-18">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" title="Start" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="0" aria-valuetext="0" aria-label="Start" aria-controls="spark-range-slider-16"></button>
      <button class="spark-slider__handle" title="Middle" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="12" aria-valuetext="12" aria-label="Middle" aria-controls="spark-range-slider-17"></button>
      <button class="spark-slider__handle" title="End" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="20" aria-valuetext="20" aria-label="End" aria-controls="spark-range-slider-18"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-range-slider">
    <label class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="0" disabled title="Start" aria-label="Start" id="spark-range-slider-19">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-20" max="30" value="12" disabled title="Middle" aria-label="Middle" id="spark-range-slider-20">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-20" max="30" value="20" disabled title="End" aria-label="End" id="spark-range-slider-21">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" title="Start" tabindex="-1" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="0" aria-valuetext="0" aria-label="Start" aria-controls="spark-range-slider-19"></button>
      <button class="spark-slider__handle" title="Middle" tabindex="-1" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="12" aria-valuetext="12" aria-label="Middle" aria-controls="spark-range-slider-20"></button>
      <button class="spark-slider__handle" title="End" tabindex="-1" role="slider" aria-orientation="horizontal" aria-valuemin="-20" aria-valuemax="30" aria-valuenow="20" aria-valuetext="20" aria-label="End" aria-controls="spark-range-slider-21"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
  </div>
</div>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-range-slider');
var sliderInstance = new Spark.RangeSlider(el);

Slider Error Example

Please complete the required field
Please complete the required field 
<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider--input" data-error>
    <label id="slider-label-4" class="spark-label">Slider Label</label>
    <input type="number" min="0" max="10" value="0" id="slider-input-4">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" role="slider" aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="10" aria-valuenow="30" aria-valuetext="0" aria-labelledby="slider-label-4" aria-controls="slider-input-4"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
    <span class="spark-slider__message">Please complete the required field</span>
  </div>
</div>

<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-slider--integrated" data-error>
    <label id="slider-label-5" class="spark-label">Slider Label</label>
    <input type="number" min="0" max="15" value="0">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" role="slider" aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="15" aria-valuenow="30" aria-valuetext="0" aria-labelledby="slider-label-5"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
    <span class="spark-slider__message">Please complete the required field</span>
  </div>
</div>

<!--
<div class="col-xs-12 col-lg-4 spark-mar-b-2">
  <div class="spark-range-slider" data-error>
    <label class="spark-label">Slider Label</label>
    <input type="number" min="-20" max="30" value="0" title="Start">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-20" max="30" value="12" title="Middle">
    <span class="spark-range-slider__input-divider"></span>
    <input type="number" min="-20" max="30" value="20" title="End">
    <div class="spark-slider__controls">
      <button class="spark-slider__handle" title="Start"></button>
      <button class="spark-slider__handle" title="Middle"></button>
      <button class="spark-slider__handle" title="End"></button>
      <span class="spark-slider__track">
        <span class="spark-slider__track-fill"></span>
      </span>
    </div>
    <span class="spark-slider__message">Please complete the required field</span>
  </div>
</div>
-->

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-slider');
var sliderInstance = new Spark.Slider(el, {
  onWillChange: function(value, inst) {
    if(value > 0) {
      inst.setErrorState(false);
    }
    else {
      inst.setErrorState(true);
    }
  }
});

Accessibility Notes

Common properties and attributes

The following attributes and properties should be set on the spark-slider__handle element(s) across all Slider components to ensure that assistive technologies are able to identify the component appropriately and provide meaningful information to users.

  • An ARIA role="slider" should be set to identify the element as a slider, as this element is the operable control that represents the value of the slider.
  • The aria-orientation property is an optional attribute that can be set on the handle. The value of this will typically be horizontal, although vertical is an acceptable value if your slider is vertical in nature. Keep in mind that a vertical variation of the Slider is not provided within Spark. If not set the default will be horizontal.
  • Use the aria-valuemin and aria-valuemax attributes to indicate to assistive technologies what the minimum and maximum values of the Slider are. The values set should match min and max values set on the Slider.
  • Use the aria-valuenow and aria-valuetext attributes to indicate to assistive technologies what the current value of the Slider is. The values of these attributes should be numerical, and when changed by the user, Javascript will be used to update the attributes with the new values.
  • If a Slider is disabled, ensure that the disabled attribute is present on the input element, and that the tabindex="-1" attribute and value are set on the Slider handle. If the Slider is programmatically disabled or enabled, these attributes will be set or removed using Javascript.

Single Value Sliders

Ensure that the label element has a unique id attribute. The value of this attribute should be used as the value of the aria-labelledby attribute set on the spark-slider__handle element. This allows the two elements to be connected via the ARIA property and ensures that the label visible on the screen matches with what assistive technologies announces to users. This is also important as a text value is not provided/set on the button element.

Multiple Value Sliders

This type of Slider utilizes 2 or more Slider handles and input elements, and as such the approach to making this fully accessible is slightly different from the single-value variation.

  • Each input element should have an aria-label property set. This is important because each element represents a particular section of the Slider. An id should also be set with the value used as the value of the aria-controls property that is set on the corresponding Slider handle. For assistive technologies that support this feature, this will indicate that the handle and the input are connected and that the button can also control the value of that input.
  • Each spark-slider__handle should also have an aria-label property set as a text value is not provided/set on the button element.