Logo
Welcome Smartik
Profile Logout
Slider
Date Picker Progress bar

Slider

The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.

How to create a Slider?

1. Initialize the plugin

jQuery(function() {
	jQuery( "#simple_slider" ).slider();
});

2. Attach it to a DIV using the ID "simple_slider" (for this example)

<div id="simple_slider"></div>

The result of the code above:

Another example

1. Initialize the plugin

jQuery(function() {
	jQuery( "#slider-range" ).slider({
		range: true,
		min: 0,
		max: 500,
		values: [ 75, 300 ],
		slide: function( event, ui ) {
			jQuery( "#range_amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
		}
	});
	jQuery( "#range_amount" ).val( "$" + jQuery( "#slider-range" ).slider( "values", 0 ) +
		" - $" + jQuery( "#slider-range" ).slider( "values", 1 ) );
});

2. Attach it to a DIV using the ID "slider-range" and create an text input wi ID range_amount to display the value (for this example)

<p>
	<span class="slider_label">Range:</span>
	<input type="text" id="range_amount" class="slider_value" />
</p>
<div class="clear"></div>
<div id="slider-range"></div>

The result of the code above:

Range:


Main Options
OPTION TYPE DEFAULT DESCRIPTION
disabled Boolean false Disables (true) or enables (false) the slider. Can be set when initialising (first creating) the slider.
animate Boolean, String, Number false Whether to slide handle smoothly when user click outside handle on the bar. Will also accept a string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
max Number 100 The maximum value of the slider.
min Number 0 The minimum value of the slider.
orientation String "horizontal" This option determines whether the slider has the min at the left, the max at the right or the min at the bottom, the max at the top. Possible values: 'horizontal', 'vertical'.
range Boolean,String false If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Two other possible values are 'min' and 'max'. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.
step Number 1 Determines the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step.
value Number 0 Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.
values Array 2 This option can be used to specify multiple handles. If range is set to true, the length of 'values' should be 2.
OPTION TYPE DEFAULT DESCRIPTION
Reference:
Date Picker Progress bar