Slider

@@adsense
Default
With hint
Customize
Accuracy mode

Large size

Default
min(max)Value
Customize
Accuracy mode
Vertical
Vertical With hint
Vertical Customize
Accuracy mode
Put slider value to input on event data-on-*

                            <div class="slider large"
                                    data-on-change="dropValueToInput"
                                    data-role="slider"
                                    data-max-value="1000"
                                    data-min-value="0"></div>
                            <div class="input-control text">
                                <input id="slider_input" value="0">
                            </div>
                            <script>
                                function dropValueToInput(value, slider){
                                    $("#slider_input").val(value);
                                }
                            </script>
Put slider value to input on data-target

                            <div class="slider large"
                                    data-target="#slider_input"
                                    data-role="slider"
                                    data-max-value="1000"
                                    data-min-value="0"></div>
                            <div class="input-control text">
                                <input id="slider_input" value="0">
                            </div>
Declarative style

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

                <div class="slider" id="slider"></div>

                <script>
                    $(function(){
                        $("#slider").slider();
                    });
                </script>

Options

Parameter Data-* Type Default value Description
position data-position int 0 Init position for slider
accuracy data-accuracy int 0 Accuracy for slider change value
color data-color string default Slider panel color (background). Can be hex color or class name
completeColor data-complete-color string default Slider complete color (background). Can be hex color or class name
markerColor data-marker-color string default Slider marker color (background). Can be hex color or class name
showHint data-show-hint boolean false Show or hide hint for value when slider change value
permanentHint data-permanent-hint boolean false If this value is true and showHint is true hint visible in permanent mode
vertical data-vertical boolean false Show slider in vertical mode
minValue data-min-value int 0 Min slider value
maxValue data-max-value int 100 Max slider value
returnType data-return-type string value Type of returned value: real value or percent
animate data-animate boolean true Animated slider marker moving when user click on slider
colors data-colors string with comma delimiter false Defines a set of colors that will be applied uniformly to complete color when marker is moving

Events

Event Data-* Params Description
onChange data-on-change (value, slide) The event fired when the user change slider marker position
@@hit