Download form input slider

Demo

Download

You can download the files used in the example from this zip file.

The color_functions.js file is just needed for the examples in order to create RGB color from HSB.

Configuration

Include the dhtmlgoodies_slider.js file like this:
<script src="dhtmlgoodies_slider.js"></script>

Create a form input field and an empty element with an ID. Example:
<td id="slider_target"></td>
<td><input type="text" name="textfield1" size="3" value="55" onchange="aFunction()"></td>

Here, we have created the empty element with the ID "slider_target" and the form element we wish to connect to the slider

Now, we need to initialize the slider. We do that with the following line:
<script type="text/javascript">
form_widget_amount_slider('slider_target',document.forms[0].textfield1,200,0,360,"aFunction()");
</script>

The arguments to the form_widget_amount_slider function are:

1. 'slider_target' = the ID of the empty element where the slider should be inserted
2. document.forms[0].textfield1 = the reference to the form field the slider should be connected to
3. 200 = The width of the slider in pixels
4. 0 = Minimum value of the slider
5. 360 = Maximum value of the slider
6. "aFunction()" = The name of the function that should be called from the slider when a value is changed. If you don't need such a function, just put in false(without quotes)

Comments

1 2 3 4 5

Doesn't work.

Him at 01:20AM, 2011/10/22.

1 2 3 4 5

Thank you for your awesome script! However there needs to be a tiny change in the js file for it to work with negative min values:

I changed line 61 to:
if(!theValue.match(/^-?[0-9.]*$/g))theValue=sliderObjectArray[theIndex]['min'] +'';

Original:
if(!theValue.match(/^[0-9.]*$/g))theValue=sliderObjectArray[theIndex]['min'] +'';

I'm still a newbie with regex, so please correct me if I did anything wrong.

Scott Rubyton at 06:48AM, 2011/12/16.

1 2 3 4 5

hi ,
how can i submit this slider values to other page ????

can you give me an example...

amir habibzadeh at 04:44PM, 2012/05/19.

Post your comment

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.

 

Confirmation code:

Please wait...

Comment preview:

Type some text to see comment preview...

Anonymous at 23:55, 05-21-2013.