Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language. See more details regarding this Migration

Slider

A slider should be used to select a value where multiple answers could be an option, such as an age picker. Icons to use in the pip can be selected from the icon library. Sliders will work from mobile devices up and will feedback to a user the option they have selected instantly. The slider relies on noUiSlider. Please refer to the documentation for more information. The slider takes a number of options:

data-js-min Is the minumum value of a slider
data-js-max Is the maximum value of a slider
data-js-start Is the value a slider should start at
data-js-step Is the number of values the slider tooltip should move
data-js-suffix Defines the suffix added to teh value displayed in tooltips and labels (e.g. days, months, lbs, kgs)
data-js-data-js-labels takes an object to plot labels below the slider
data-js-data-js-type specifies the type of slider required
Adding the class rc-slider--gradient applies a visual grade to the slider

Slider bar default

<div class="rc-slider" data-js-slider="" data-js-min="0" data-js-max="100" data-js-start="0" data-js-step="1" data-js-suffix="days">
  <input type="text" id="slider-result" />
</div>

Slider bar default - stepped

<div class="rc-slider" data-js-slider="" data-js-min="0" data-js-max="100" data-js-start="0" data-js-step="25" data-js-suffix="lbs">
  <input type="text" id="slider-result" />
</div>

Slider bar with indicators

<div class="rc-slider" data-js-slider="" data-js-min="0" data-js-max="12" data-js-start="3" data-js-labels="{"0":"0", "25":"25", "50":"50", "75":"75", "100":"100"}" data-js-type="slider-labels" data-js-suffix="months">
  <input type="text" id="slider-result" />
</div>

Slider bar - throttle

<div class="rc-slider" data-js-slider="" data-js-min="0" data-js-max="12" data-js-start="3" data-js-second-marker="6" data-js-labels="{"0":"0", "25":"25", "50":"50", "75":"75", "100":"100"}" data-js-type="slider-labels" data-js-suffix="months">
  <input type="text" id="slider-result" />
</div>

Slider - visual grade

<div class="rc-slider rc-slider--gradient" data-js-slider="" data-js-min="0" data-js-max="100" data-js-start="0" data-js-step="1">
  <input type="text" id="slider-result" />
</div>

Slider bar - throttle - visual grade

<div class="rc-slider rc-slider--gradient" data-js-slider="" data-js-min="0" data-js-max="12" data-js-start="2" data-js-second-marker="4" data-js-labels="{"0":"0", "25":"25", "50":"50", "75":"75", "100":"100"}" data-js-type="slider-labels" data-js-suffix="lbs">
  <input type="text" id="slider-result" />
</div>