SLIDERSliders are used to change data over a range by moving pointer between maximum and minimum value. This is also used as range selector to input data to any process.
Click on the above slider
The pointer can be moved by using Mouse pointer ( Holding the left mouse button ) or by using left and right arrow of keyboard.
These are used in color picker, volume controllers etc. We have to link Jquery UI from google CDN like this.
OPTIONSWe can add various options to manage our slider as per requirement.
Orientation : vertical or horizontal
Double pointed slider with Minimum and Maximum rangeBy using rage option we can display two pointers to same slider to show Min and Max value . It works like range selector giving two outputs. Instead of reading one value we will get two values.
Adding default value to double pointed slider
Event : ChangeChange event is triggered once the slider pointer movement is completed by user. So this doesn't give continuous change value of the slider.
Here d1 is the id of Div layer inside which we are displaying the value.
Event : SlideThis event is triggered when the slider is on move; this gives continuous change value of the slider.
Event: Start and Stop of movementStart and stop event is triggered by starting and stopping of pointer while moving or changing position.
Changing value through text boxWe can change the value by entering data in a textbox or by sliding the pointer.
By using another widgets know as spinner we can increment or decrement data in a text box. We will try to develop a script to interlink one Spinner with Slider so by changing any one, other value can be changed.
Method: Enable Disable SliderWe can change the status of slider to enable or disable by changing status of a checkbox. You can read how to get the status of a checkbox here. Here is the code.
Managing Style of a Slider
We can add image to slider pointer , here is the style property to use one arrow image as slider pointer.
Time setting by Sliders with CalendarBy changing Hour, Minute and Second through slider we can set time We can select date and time by selecting date from calendar and time by changing hour, minute and second slider.
Changing HEX value to change colorBy changing the slider we can change the background color of a div tag . We will use colour animation of JQuery UI
Using 3 colour sliders for Red Green & Blue colorsWe can combine three colour sliders to make a colour combination to use as background color of a div layer
Changing FONT & Background colorGenerate style Property by changing R G B color sliders. You can change background color , font color, font size and text alignment property of a div tag.