Slider

.Slider

The Slider component is dependent on jQuery UI.

Overrides of the jQuery UI generated structural classes are defined in the file _component.ui-slider.scss.

The jQuery UI generated classes are prefixed with ui-.

The Slider component itself defines the "content" of the slider, which jQuery UI then turns in to a functioning slider.

Example

  • Weak
  • Medium
  • Strong

Markup

<div class="Slider">
    <div class="kss-slider-handle "></div>
    <div>
        <ul class="Slider-label-list">
          <li class="Slider-label-item">Weak</li>
          <li class="Slider-label-item active">Medium</li>
          <li class="Slider-label-item">Strong</li>
        </ul>
    </div>
</div>

Slider themes

Sliders themes classes - applied to the Slider handler element.

Modifiers

Slider-theme--thermo
A heat scale like theme
  • Weak
  • Medium
  • Strong
Slider-theme--thermo-reverse
Also a heat scale like theme, but with the coloring in reverse
  • Weak
  • Medium
  • Strong

Markup

<div class="Slider">
    <div class="kss-slider-handle [modifier class]"></div>
    <div>
        <ul class="Slider-label-list">
          <li class="Slider-label-item">Weak</li>
          <li class="Slider-label-item active">Medium</li>
          <li class="Slider-label-item">Strong</li>
        </ul>
    </div>
</div>