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

Him
Doesn't work.
Him at 01:20AM, 2011/10/22.
Scott Rubyton
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.
amir habibzadeh
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

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com