Download form input slider



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.


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">

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)


Doesn't work.
Him at 11:20PM, 2011/10/21.
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 05: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 02:44PM, 2012/05/19.

Post your comment

Don't have an avatar? Create one at

Unable to save captcha-image.