Roll Widget
Roll is a number roller widget. It helps to capture only the number inputs from user. It has easy navigation with up and down buttons and user can use up and down arrows to change the value.

Basic Usage
$.domLoaded(function() {
	
	$.get("#drp").widget("roll", 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 roller
enabledBooleanOptionalif false, roller is disabled
dimJSONOptionalSets dimension of the roller
NameDescription
widWidth of the roller
htHeight of the roller
posJSONOptionalSets position of the roller
NameDescription
xHorizontal Position
yVertical Position

Methods
NameDescription
enable()Enables the roller
disable()Disables the roller

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

				$.get("#roll1").widget("roll", {
					range : { 
						from : -10, 
						to : 10
					},
					unit : 5,
					def : 0,
					dim : { wid : 100 }
				});		

				$.get("#roll2").widget("roll", {
					unit : 3,
					def : -10,
					dim : { wid : 60 }
				});	

				$.get("#roll3").widget("roll", {
					range : { 
						from : 0, 
						to : 2.3
					},
					unit : 0.1,
					def : 0,
					dim : { wid : 80 }
				});	

				$.get("#roll4").widget("roll", {
					range : {
						from : 0
					},
					dim : { wid : 70 }
				});		

				
				$.get("#roll5").widget("roll", {
					range : {
					    to : 1,
						from : -1
					},
					unit : 0.001,
					dim : { wid : 100 }
				});					
				
				var rol = $.get("#roll6").widget("roll", {
					dim : { wid : 70 },
					enabled : false
				});		

				$.get("#enab").on("click", function() {
					rol.enable();
				});
				
				$.get("#disb").on("click", function() {
					rol.disable();
				});				
								
					
			});
	<body>
	
		<h4>Range -10 to 10 with unit change of 5</h4>
		<input type="text" id="roll1"></input>
		
		<h4>Default is -10 and no range limit with unit change of 3</h4>		
		<input type="text" id="roll2"></input>
		
		<h4>Range 0 to 2.3 with unit change of 0.1 (Decimal)</h4>		
		<input type="text" id="roll3"></input>
		
		<h4>Only Starting Range 0</h4>		
		<input type="text" id="roll4"></input>
		
		<h4>Decimal Unit 0.001 and Range is -1 to 1</h4>		
		<input type="text" id="roll5"></input>	
		
		<h4>Enable / Disable</h4>		
		<input type="text" id="roll6"></input>
		<input type="button" value="Enable" id="enab" />
		<input type="button" value="Disable" id="disb" />

	</body>	
Result