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.
If you are updating the database record with the final value then better to use STOP event. By using slide event, unnecessarily we will be updating records on each step of slider movement.
If you are displaying the change value to users then show them each step of change by using SLIDE event.
START event can be used to highlight a particular slider from a group of slider which is in current use.
Adding attributes to SliderWe can keep additional information in the form of attributes and use them. HTML5 supports these extra information in the format
This is required when we want to know which one is used by user from a group of sliders having different attributes. When displaying different group of records with different set values we can add more attributes to each slider to know which one is changed or used by user.
Whenever any slider is changed by user we can read the attributes like this.
Our slider with additional attributes is here
Changing value through text boxWe can change the value by entering data in a textbox or by sliding the pointer.
By using another widgets known 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. 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.
This article is written by plus2net.com team.