jQuery Slider example

This is an example to use jQuery Slider and synchronize the value of slider with the database using server side program.

Access and work the example

In order to access this example, please access the url below or "jQuery Slider" link from the top page.

http://localhost:8080/samples/slider/

Then the page below will appear.

jQuery slider example

top of this page

Implementation

This example uses 3 sliders. The value of slider changes, it access the server program and synchoronize the data, by using ajax.

The source code is in the "ALINOUS_HOME/samples/slider/" folder.

jQuery slider example folder

top of this page

Included jQuery files

This example uses css and JavaScript files of jQuery, listed below.

In order to change the theme of jQuery, please take a look at jQuery Dialog. The way to do that is same.

top of this page

Set up Html

At first, put the html code to apply JQuery slider plugin.

This sample has 3 sliders and there are 3 div tags to be the slider widgets.

top of this page

Set up jQuery Slider plugin

Set up the jQuery slider widget and event handler which is called when the slider's value changed.

When the slider widget changing value, the "refreshSwatch" function called. When the sliding finished, the "refreshSwatch" function and noname function difined at the last of this source code is fired. The jQuery plugin can have multiple event handler for a single event.

In this event handler, it has 2 arguments, they are "event" and "ui". By using them, you can get necessary information to synchronize the data in the server side program.

top of this page

Server side program

This server side program is dummy.

But by settting break point of the debugger, you can watch the parameters sent via Ajax.

Parameters sent via ajax

The "$IN.targetId" indicates which slider is changed, and the "$IN.targetValue" does the value.

Testing automation

This example is testable code, there is more example to do testing automation. Please take a look at Testing jQuery Slider example.



Go to Top