Hubtel Theme Documentation

Sliders

Sliders in Pages are powered by noUiSlider and Ion.RangeSlider, which are lightweight jQuery Range Slider plugins that come with tons of options and support for multiple devices.

noUiSlider

jQuery users

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

example :

<!-- Element to be used with the plugin -->
<div id="noUiSlider" class="bg-master"></div>

<script>
$(document).ready(function() {
    // Apply the plugin to the element
    $("#noUiSlider").noUiSlider({
        start: 40,
        connect: "lower",
        range: {
            'min': 0,
            'max': 100
        }
    });
});
</script>

Color options

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

example :

<div id="noUiSliderOne" class="bg-danger"></div>
<div id="noUiSliderTwo" class="bg-warning"></div>
<div id="noUiSliderThree" class="bg-success"></div>

AngularJS users

Step one

Include the noUiSlider ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step two

Add the same markup as mentioned above in jQuery guide, but this time apply the plugin using ui-jq directive provided by Ui.utils. You can pass the options to ui-options

<div style="width:200px">
    <div class="bg-master m-b-10" ui-jq="noUiSlider" ui-options="{
            start: 40,
            connect: 'lower',
            range: {
                'min': 0,
                'max': 100
            }
        }">
    </div>
</div>

Ion.RangeSlider

jQuery users

Follow these steps to include Ion.RangeSlider in your page

Step one

Include the necessary stylesheet files inside the <head>

<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/ion-slider/css/ion.rangeSlider.css">
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/ion-slider/css/ion.rangeSlider.skinFlat.css">

Step two

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

<script type="text/javascript" src="assets/plugins/ion-slider/js/ion.rangeSlider.min.js"></script>

Step three

Apply the plugin to your desired element

example :

<!-- Element to be used with the plugin -->
<div class="irs-wrapper">
    <input type="text" id="ionSlider" name="ionSlider" value="0;2057" />
</div>

<script>
$(document).ready(function() {
    // Apply the plugin to the element
    $("#ionSlider").ionRangeSlider({
        min: 0,
        max: 5000,
        type: 'double',
        prefix: "$",
        maxPostfix: "+",
        prettify: false,
        hasGrid: true
    });
});
</script>

Color options

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

example :

<div class="irs-wrapper warning">
    <input type="text" id="ionSliderOne" name="ionSlider" value="0;2057" />
</div>

<div class="irs-wrapper danger">
    <input type="text" id="ionSliderTwo" name="ionSlider" value="0;2057" />
</div>

<div class="irs-wrapper complete">
    <input type="text" id="ionSliderFour" name="ionSlider" value="0;2057" />
</div>

<div class="irs-wrapper success">
    <input type="text" id="ionSliderThree" name="ionSlider" value="0;2057" />
</div>

<div class="irs-wrapper primary">
    <input type="text" id="ionSliderFour" name="ionSlider" value="0;2057" />
</div>

AngularJS users

Step one

Include the ionRangeSlider ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step two

Add the same markup as mentioned above in jQuery guide, but this time apply the plugin using ui-jq directive provided by Ui.utils. You can pass the options to ui-options

<div class="irs-wrapper primary">
    <input type="text" name="" value="0;4000" class="ion_slider" ui-jq="ionRangeSlider" ui-options="{
            min: 0,
            max: 4000,
            type: 'double',
            prefix: '$',
            maxPostfix: '+',
            prettify_enabled: false,
            grid: true
        }" />
</div>

Other useful resources