Sliders

Sliders in Pages are powered by noUiSliderarrow-up-right and Ion.RangeSliderarrow-up-right, which are lightweight jQuery Range Slider plugins that come with tons of options and support for multiple devices.

noUiSlider

Follow these steps to include noUiSlider in your page

Step one

Include stylesheet jquery.nouislider.css inside the <head>

<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/jquery-nouislider/jquery.nouislider.css">

Step two

Include the relevant javascript files inside the <body> before core template script inclusions

<script type="text/javascript" src="assets/plugins/jquery-nouislider/jquery.nouislider.min.js">
<script type="text/javascript" src="assets/plugins/jquery-nouislider/jquery.liblink.js">

Step three

Apply the plugin to your desired element

Color options

Slider color can be changed by appending the pre-defined classes. Please refer to Color guidearrow-up-right for all the color options

Ion.RangeSlider

Follow these steps to include Ion.RangeSlider in your page

Step one

Include the necessary stylesheet files inside the <head>

Step two

Include the relevant javascript files inside the <body> before core template script inclusions

Step three

Apply the plugin to your desired element

Color options

Slider color can be changed by appending the pre-defined classes.

Last updated