UserControl javascript: get control by id

[NickThissen]

Hi,

I have a UserControl with two labels and a slider control on it. I have a javascript function that is called when the value of the slider changes, and it is supposed to update the text of the labels.

The ascx code is:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="AlignSlider.ascx.vb" Inherits="F1TimeTrials.Controls.AlignSlider" %>
<%@ Register assembly="Infragistics35.Web.v10.2, Version=10.2.20102.1011, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.EditorControls" tagprefix="ig" %>
 
<script type="text/javascript" id="igClientScript">
<!--
 
    function sliderControl_ValueChanged(sender, eventArgs) {
        var leftLabel = document.getElementById('<%= Me.lblLeftValue.ClientID %>');
        var rightLabel = document.getElementById('<%= Me.lblRightValue.ClientID %>');
 
        var maxValue = sender.get_maxValueAsDouble();
        var value = eventArgs.get_newValue();
        leftLabel.innerHTML = value;
        rightLabel.innerHTML = maxValue - value;
    }// -->
</script>
 
<asp:Table ID="table" runat="server">
    <asp:TableRow runat="server">
 
        <asp:TableCell runat="server">
            <asp:Label runat="server" ID="lblLeftValue" Text="0" />
        </asp:TableCell>
 
        <asp:TableCell runat="server">
            <ig:WebSlider ID="sliderControl" runat="server" ValueType="Double" >
                <ClientEvents ValueChanged="sliderControl_ValueChanged" />
            </ig:WebSlider>
        </asp:TableCell>
 
        <asp:TableCell runat="server">
            <asp:Label runat="server" ID="lblRightValue" Text="100"/>
        </asp:TableCell>
 
    </asp:TableRow>
</asp:Table>

When I put this control on a page it works just fine. I drag the slider, the labels update with the new values.


However, I actually need a large number of these controls on my page (around 10-20 I think), and this is where the problems start. When I change the slider on one of these UserControls, it changes the text of only the labels in the LAST instance of this UserControl on the page. It seems that the 'document.getElementById' function actually searches through the entire page rather than just the one UserControl.

How can I fix this? How can I get the two label controls from this current UserControl instance, and not any other instance on the page?