在一个单独的web控件中创建多个Jquery滑块-asp.net c#

我几天来一直在努力解决这个问题，所以下面是：

我有一个主自定义控件（web控件），它在for循环中以编程方式创建多个web控件，每个控件都包含一个jquery滑块。我尝试过从代码后面用javascript字符串创建滑块，方法是包含一个变量来更改滑块div id，使其唯一且不与其他滑块冲突。我遇到的问题是，尽管创建了web控件，但只创建了第一个jquery滑块（在第一个控件中）。

因此：

主控

    protected void Page_Load(object sender, EventArgs e)
    {
       //create the custom web control with sliders in each
        for (int a = 0; a < 9; a++)
        {
            CustomControl sliderControl = (CustomControl)LoadControl("CustomControl.ascx");
            sliderControl.SliderID = a;
            sliderControl.ID = "sliderControl_" + a;
            sliderControl.ClientIDMode = System.Web.UI.ClientIDMode.Static;
            thismaincontainerdiv.Controls.Add(sliderControl);
        }
    }

SliderControl-最初在这里创建滑块，但会与任何其他滑块控件ID:发生冲突

    <script>
$(function () {
    $("#slider").slider({
        value: 1,
        min: 1,
        max: 10,
        step: 1,
        slide: function (event, ui) {
            $("#amount").val("$" + ui.value);
        }
    });
    $("#amount").val("$" + $("#slider").slider("value"));
});
    </script>
    <div id="slidercontainer" runat="server" style="width:100%; height:87px; background-color:lightgray">
<div id="sliderdescription" runat="server" style="width:100%; height:60px;">
    <div id="startblockdesc" runat="server" style="width:30px; height:100%; float:left"></div>
    <div id="descdiv" runat="server" style="position:relative; top:25px">
    <asp:Label ID="lbdescription" runat="server" style="width:100%; height:32px; font-size:20px; font-family:Helvetica" Text="Description"  ></asp:Label>
    </div>
</div>
<div id="sliderdiv" runat="server" style="width:100%; height:27px;">
    <div id="startblockslider" runat="server" style="width:40px; height:100%; float:left"></div>
    <div id="slider"></div>
</div>

然后，通过不使用上面的滑块控制。Javascript允许我更改用于滑块的div的ID：

        protected void Page_Load(object sender, EventArgs e)
    {
        string stringSliderID = "slider_" + this.SliderID;
        string JavaScriptString = @"
              var sliderID = <SliderID>;
              var slider = document.getElementById('slider');
              slider.id = 'slider_' + sliderID;
              $(function () {
                  $('#slider_' + sliderID).slider({
                      value: 1,
                      min: 1,
                      max: 10,
                      step: 1,
                      slide: function (event, ui) {
                          $('#amount').val('$' + ui.value);
                      }
                  });
                  $('#amount').val('$' + $('#slider_' + sliderID).slider('value'));
              }); 

          ";
        System.Web.UI.ScriptManager.RegisterStartupScript(this, this.GetType(), "Slider", JavaScriptString.Replace("<SliderID>", this.SliderID.ToString()), true);         
    }

如有任何帮助，我们将不胜感激。

这还清楚吗？我会看看那个链接。谢谢你的评论。

谢谢。