Slider
Trace: » Accordion » Entourage UI » Get Started with Ruby on Rails » Working With Forms » Slider

Slider

A movable handle which indicates a value on a scale.

Demo

Source Code 

<div id="mySlider" control="jquery_slider[value=20]"></div>

Script Example

In this sample, a slider with the name of 'mySlider' is created. The function argument of createControl is called when the widget renders.

Create the control and call a function to set the initial value… 

App.createControl(
	'mySlider', 
	'jquery_slider', 
	{
	},
	function() {
		this.value(20);
	}
);

Get the handle to an instance of the control… 

App.getControl('mySilder', 'jquery_slider', function() {
 
	this.disable();
 
});

Options

The slider control is made up of a single div. The control tag on the div indicates what kind of widget the div will become. The widget identity can accept the following initial parameters…

Initial options supported by the widget.

Option Description Default Type
animate Whether slide handle smoothly when user click outside handle on the bar. true Bool
axis Normally you don't need to set this option because the plugin detects the slider orientation automatically. If the orientation is not correctly detected you can set this option to 'horizontal' or 'vertical'. null String
handle The jquery selector to use for the handle(s) of the slider. ”.ui-slider-handle” String
handles Specify boundaries for one or more handles. Format: [{start:Integer, min:Integer, max:Integer, id:String} [, ..]]. Only start is required. If the slider doesn't have handles already, they are automatically created. null Array
min The maximum value of the slider. Useful for tracking values via callback, and to set steps. 0 Int
max The minimum value of the slider. Useful for tracking values via callback, and to set steps. 100 Int
range If set to true, the slider will detect if you have two handles and create a stylable range element between these two. You now also have access to ui.range in your callbacks to get the amount of the range. false Bool
value The value the handle will have first. null Int
stepping If defined, the new value has to be dividable through this number, so the slider jumps from step to step. null Int
steps Alternative to stepping, this defines how many steps a slider will have, instead of how many values to jump, as in stepping. 0 Int
start Function that gets called when the user starts sliding. null Function
slide Function that gets called on every mouse move during slide. Takes arguments e and ui, for event and user-interface respectively. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value. null Function
change Function that gets called on slide stop, but only if the slider position has changed. Takes arguments e and ui, for event and user-interface respectively. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value. null Function
stop Function that gets called when the user stops sliding. null Function

Actions/JavaScript API

Actions accept the same argument types as their equivalent functions.

Function Action Description
enable() enable Enable the slider.
disable() disable Disable the slider.
value(int) value[] Set the value of the slider.
ui/widgetslider.txt · Last modified: 2009/03/10 16:46 by kwhinnery
Show pagesource Old revisions
Index Back to top