Sliderthis component in develop

Component structure

    <div class="slider" data-role="slider">
        <div class="complete"></div>
        <div class="marker"></div>
    </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.

Params

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.

Events

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

    $(function(){
        $("#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
        $("#slider1").data('value');
    })

Javascript

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