Working together for the ultimate brand experience

Royal Canin Design Language

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>

Copied!

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>

Copied!

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>

Copied!

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>

Copied!

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>

Copied!

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>

Copied!