How to create slider widgets in Nedil JS

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.

Name

Type

Must/Optional

Description

range

JSON

Optional

It provides the upper and lower limitations of the numbers

Name	Description
from	Start range number
to	End range number

name

String

Optional

Name of the Element

unit

Number

Optional

Unit of values for every jump / change

def

Number

Optional

Default value of the number slider

enabled

Boolean

Optional

if false, slider is disabled

layout

String

Optional

Horizontal or Vertical Slider. Values mut be "horizontal" or "vertical". Default is "vertical"

onmove

Function

Optional

onmove function will be called as the user moves the slide. The current value will be passed as parameter.

dim

JSON

Optional

Sets dimension of the slider

Name	Description
wid	Width of the slider
ht	Height of the slider

pos

JSON

Optional

Sets position of the slider

Name	Description
x	Horizontal Position
y	Vertical Position

Methods

Name	Description
enable()	Enables the slider
disable()	Disables the slider
getValue()	Gets current value of the slider

Number slider Widget Examples Example 1

JSHTML
									$.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