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

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