Horizontal Slider

init start value

discrete mode (accuracy = 20)

Event handler

Move marker for see work handler.

Current value: 0

Vertical Slider

Component structure

    <div class="slider" data-role="slider">
        <div class="complete"></div>
        <div class="marker"></div>

Component definition

    <div class="slider" data-role="slider"></div>

    <div class="slider" data-role="slider" data-param-init-value="35"></div>

    <div class="slider" data-role="slider" data-param-accuracy="20"></div>

    <div class="slider vertical" data-role="slider"></div>

For use vertical slider you must set height attribute manually.


You can set params for slider: data-param-init-value (default: 0) and data-param-accuracy (default: 1). To set discrete mode of slider set accuracy parameter to value different from 1.


Slider component is supported next events: onchange, onchanged. Event onchange fired while slider position changed. Event onchanged fired when marker stopped.

        $("#slider1").on("change", function(e, val){
            // e is event
            // val is current value

        $("#slider1").on("changed", function(e, val){
            // e is event
            // val is current value

        // for retrieve a current value you can call


To use slider component you must include slider.js in head of page.