Board Logo

slider control
hakkatil - 11/3/2006 at 01:08 PM

I have 5 text boxes and 4 slider controls. How can I limit 4 text boxes values and display the total in 5th text box using slider control?

Here is the sample code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Tigra Slider Control - Demo #2 (Multiple Sliders)</title>
<script language="JavaScript" src="slider.js"></script>
</head>

<body>
<form action="multiple_sliders_demo.html" method="get" name="demoForm">
<table border="1" width="100%" id="table1">
<tr>
<td width="74">Protein 1</td>
<td width="41"><script language="JavaScript">
var A_TPL = {
'b_vertical' : false,
'b_watch': true,
'n_controlWidth': 120,
'n_controlHeight': 16,
'n_sliderWidth': 16,
'n_sliderHeight': 15,
'n_pathLeft' : 1,
'n_pathTop' : 1,
'n_pathLength' : 103,
's_imgControl': 'img/blueh_bg.gif',
's_imgSlider': 'img/blueh_sl.gif',
'n_zIndex': 1
}

var A_INIT1 = {
's_form' : 0,
's_name': 'sliderValue1',
'n_minValue' : 0,
'n_maxValue' : 100,
'n_value' : 0,
'n_step' : 1
}
new slider(A_INIT1, A_TPL);
</script></td>
<td>
<input name="sliderValue1" id="sliderValue1" type="Text" size="3">%</td>
</tr>
<tr>
<td width="74">Protein 2</td>
<td width="41"><script language="JavaScript">
var A_INIT2 = {
's_form' : 0,
's_name': 'sliderValue2',
'n_minValue' : 0,
'n_maxValue' : 100,
'n_value' : 0,
'n_step' : 1
}
new slider(A_INIT2, A_TPL);
</script></td>
<td>
<input name="sliderValue2" id="sliderValue2" type="Text" size="3">%</td>
</tr>
<tr>
<td width="74">Protein 3</td>
<td width="41"><script language="JavaScript">
var A_INIT2 = {
's_form' : 0,
's_name': 'sliderValue3',
'n_minValue' : 0,
'n_maxValue' : 100,
'n_value' : 0,
'n_step' : 1
}
new slider(A_INIT2, A_TPL);
</script></td>
<td>
<input name="sliderValue3" id="sliderValue3" type="Text" size="3">%</td>
</tr>
</table>

&nbsp;<input name="totalsliderValue" id="totalsliderValue" type="Text" size="3" value="">
display the total here and limit it to100</form>

</body>
</html>


pacify360 - 2/3/2007 at 07:15 PM

Actually the solution is much simpler than all that. Just make a div around your body tag with onMouseUp calling a javacsript function that changes the text box. Like this:

<body>
<div onMouseUp="modify_high_textbox();">

</div>
</body>

As far as I can tell that should do it. See above for example of the function. Wish someone had told me that 6 hours ago.


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/