Yahoo User Interface: Slider Control
 

I am trying to put multiple sliders on a web form. The sample on YUI only shows one slider on a form. I tried developing my own code to allow for 4 sliders on one form, but as a beginner in Javascript, I'm having some difficulty. I am getting the following error: Undefined is null or not an object when I navigate to the page and none of the sliders actually move. Can someone please help me with this. I would greatly appreciate it. Thanks again in advance.

<!--Javascript-->
<script type="text/javascript">
(function()
{
var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
lang = YAHOO.lang,
sliderLA,sliderDP,sliderIR,sliderT,
valuearea = "slider-value",
textfield = "slider-converted-value"

// The slider can move 0 pixels up
var topConstraint = 0;

// The slider can move 600 pixels down
var bottomConstraint = 600;

// Custom scale factor for converting the pixel offset into a real value
var scaleFactor = 1.5;

// The amount the slider moves when the value is changed with the arrow keys
var keyIncrement = 20;
var tickSize = 30;

Event.onDOMReady(function()
{
sliderLA = YAHOO.widget.Slider.getHorizSlider("slider-la", "slider-thumb1", 0, 600, 10);
sliderLA.getRealValue = function(){return Math.round((this.getValue() * scaleFactor + 100)*1000);}

sliderDP = YAHOO.widget.Slider.getHorizSlider("slider-dp", "slider-thumb2", 0, 600, 10);
sliderDP.getRealValue = function(){return Math.round((this.getValue() * scaleFactor + 100)*1000);}

sliderIR = YAHOO.widget.Slider.getHorizSlider("slider-ir", "slider-thumb3", 0, 600, 10);
sliderIR.getRealValue = function(){return Math.round((this.getValue() * scaleFactor + 100)*1000);}

sliderT = YAHOO.widget.Slider.getHorizSlider("slider-t", "slider-thumb4", 0, 600, 10);
sliderT.getRealValue = function(){return Math.round((this.getValue() * scaleFactor + 100)*1000);}

sliderLA.subscribe("change", function(offsetFromStart) { displaynewvalue(sliderLA, offsetFromStart); });
sliderDP.subscribe("change", function(offsetFromStart) { displaynewvalue(sliderDP, offsetFromStart); });
sliderIR.subscribe("change", function(offsetFromStart) { displaynewvalue(sliderIR, offsetFromStart); });
sliderT.subscribe("change", function(offsetFromStart) { displaynewvalue(sliderT, offsetFromStart); });

function displaynewvalue(currslider, offsetFromStart)
{
var valnode = Dom.get(valuearea);
var fld = Dom.get(textfield);
// Display the pixel value of the control
valnode.innerHTML = offsetFromStart;
// use the scale factor to convert the pixel offset into a real value
var LaValue = sliderLA.getRealValue();
var DpValue = sliderDP.getRealValue();
var IrValue = sliderIR.getRealValue();
var TValue = sliderT.getRealValue();
// update the text box with the actual value
fld.value = (LaValue - DpValue) * ( (IrValue / 1200) / (1 - (1 + (IrValue / 1200)) ** -(TValue * 12)));
// Update the title attribute on the background. This helps
// assistive technology to communicate the state change
//Dom.get(bg).title = "slider value = $" + actualValue;

});

currslider.subscribe("slideStart", function()
{
YAHOO.log("slideStart fired", "warn");
});

currslider.subscribe("slideEnd", function()
{
YAHOO.log("slideEnd fired", "warn");
});

// Listen for keystrokes on the form field that displays the
// control's value. While not provided by default, having a
// form field with the slider is a good way to help keep your
// application accessible.

Event.on(textfield, "keydown", function(e)
{
// set the value when the 'return' key is detected
if (Event.getCharCode(e) === 13)
{
var v = parseFloat(this.value, 10);
v = (lang.isNumber(v)) ? v : 0;

// convert the real value into a pixel offset
currslider.setValue(Math.round(v/scaleFactor));
}
});

// Use setValue to reset the value to white:
//Event.on("putval", "click", function(e) {
//slider.setValue(100, false); //false here means to animate if
//possible});

// Use the "get" method to get the current offset from the
// slider's start position in pixels. By applying the scale
//factor, we can translate this into a "real value
//Event.on("getval", "click", function(e) {
// YAHOO.log("Current value: " + slider.getValue() + "\n" +
//"Converted value: " + slider.getRealValue(), "info", "example"); //});
});//Event.onDomReady
})();
</script>


<!--HTML-->
<table width="95%" border="1" align="center" cellpadding="0" cellspacing="0" style="margin-bottom: 20px">
<tr>
<td align="right">Loan Amount:</td>
<td width="83%">
<div id="slider-la" tabindex="1" title="Loan Amount in Thousands" hidefocus="true">
<div id="slider-thumb1" class="thumb">
<img src="images/thumb-n.gif" />
</div>
</div>
</td>
</tr>
<tr>
<td width="17%" align="right">Down Payment: </td>
<td>
<div id="slider-dp" tabindex="2" title="Down Payment in Thousands" hidefocus="true">
<div id="slider-thumb2" class="thumb">
<img src="images/thumb-n.gif" /> </div>
</div> </td>
</tr>
<tr>
<td width="17%" align="right">Interest Rate: </td>
<td>
<div id="slider-ir" tabindex="3" title="Fixed Interest Rate" hidefocus="true">
<div id="slider-thumb3" class="thumb">
<img src="images/thumb-n.gif" /> </div>
</div> </td>
</tr>
<tr>
<td align="right">Term (yrs): </td>
<td>
<div id="slider-t" tabindex="4" title="How many years?" hidefocus="true">
<div id="slider-thumb4" class="thumb">
<img src="images/thumb-n.gif" /> </div>
</div> </td>
</tr>
<tr>
<td colspan="2" align="right">&nbsp;</td>
</tr>
<tr>
<td colspan="2" align="center">Approximate Payment: $
<input name="text" type="text" id="slider-converted-value" size="10" maxlength="4" autocomplete="off" />
<span id="slider-value">0</span>
</td>
</tr>
<tr>
<td colspan="2" align="center">&nbsp;</td>
</tr>
<tr>

<td colspan="2"><p>
<!--We'll use these to trigger interactions with the Slider API -->
</p>

<button id="putval">Change slider value to 100 (converted value 150)</button>
<button id="getval">Write current value to the Logger</button> </td>
</tr>
</table>

Would, then, anyone know of some samples for putting multiple YUI sliders on a form?