Slider

@@adsense

Default

With hint

With hint bottom

Accuracy mode

Buffered

Cycle marker

Customize

Ani complete

Vertical

Vertical With hint

Vertical Customize

Accuracy mode

Complete multi colors

Move slider marker to change complete color

Put slider value to input on event data-on-*


                            <div class="slider"
                                    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"
                                    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>

Put slider value to non input on data-target


                            <div class="slider"
                                 data-target="#slider-target-non-input"
                                 data-role="slider"
                                 data-max-value="1000"
                                 data-min-value="0"></div>
                            <button class="button primary">
                                Send value
                                <span id="slider-target-non-input">0</span>
                            </button>

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
buffer	data-buffer	int	0	buffer size (0-100) in percent for slider (great for player)
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