Slider Widget
Slider widget will help to get user input within a range. Similar to number roller. Slider will give extra convenience for users to access.

Basic Usage
$.domLoaded(function() {
	
	$.get("#slid").widget("slider", CONFIG_JSON );	
	
}
Configuring Options
It contains array of JSON objects. The properties are mentioned below.
NameTypeMust/OptionalDescription
rangeJSONOptionalIt provides the upper and lower limitations of the numbers
NameDescription
fromStart range number
toEnd range number
nameStringOptionalName of the Element
unitNumberOptionalUnit of values for every jump / change
defNumberOptionalDefault value of the number slider
enabledBooleanOptionalif false, slider is disabled
layoutStringOptionalHorizontal or Vertical Slider. Values mut be "horizontal" or "vertical". Default is "vertical"
onmoveFunctionOptionalonmove function will be called as the user moves the slide. The current value will be passed as parameter.
dimJSONOptionalSets dimension of the slider
NameDescription
widWidth of the slider
htHeight of the slider
posJSONOptionalSets position of the slider
NameDescription
xHorizontal Position
yVertical Position

Methods
NameDescription
enable()Enables the slider
disable()Disables the slider
getValue()Gets current value of the slider

Number slider Widget Examples Example 1
JS HTML
			$.domLoaded( function() {

				sli1 = $.get("#slider1").widget("slider", {
					range : { 
						from : -10, 
						to : 10
					},
					unit : 5,
					def : 0,
					pos : { x : 10, y : 100},
					dim : { wid : 100 },
					enabled : true
				});	

				sli2 = $.get("#slider2").widget("slider", {
					range : { 
						from : 0, 
						to : 255
					},
					def : 120,
					dim : { ht : 150 },
					layout : "vertical",
					onmove : function(val) {
						$.get("#val").element().value = val;
					},					
					enabled : true
				});	

				var slid = $.get("#slider3").widget("slider", {
					enabled : false,
					unit : 2
				});	
				
				$.get("#enab").on("click", function() {
					slid.enable();
				});
				
				$.get("#disb").on("click", function() {
					slid.disable();
				});
				
				$.get("#val1").on("click", function() {
					alert(slid.getValue());
				});
						
			});
	<body>
	
		<h4> Horizontal Layout - Range -10 to 10 - Unit 5 </h4>
		<div id="slider1"></div>
		
		<h4> Vertical Layout - Range 0 to 255 - Unit 1 - with onmove event</h4>
		<div id="slider2"></div>
		<input type="text" id="val" style="margin-left: 40px"/>
		
		<h4> Get Value and Enable / Disable Functions</h4>
		<div id="slider3"></div>

		<input type="button" id="enab" value="Enable"/>
		<input type="button" id="disb" value="Disable"/>
		<input type="button" id="val1" value="Get Value"/>
		
	</body>	
Result