Multiple dependent slider Control

Question

User1735430007 posted

Hello,

Would someone here know if multiple slider controls can be added to a web page together that are dependent on each other. How I envisioned this is that when as a user, if I were to modify values on one slider, it would automatically adjust the values on the others depending on mathematic formulas/calculations. The user can edit only one slider at a time and changing values will auto-adjust values on the others. Based on which slider control value I change, I would like the other sliders to move or change accordingly. So, I guess there could be a different formula for each of those fields depending on which field I am modifying as a user.

The visual would look something like Windows Volume control but horizontally.

Is this doable? Please advise.

Answer 1

User-417640953 posted

Hi shadowraider,

Thank you post the issue to asp.net forum.

According to your description, I see you want to add multiple ajax SliderExtender to page.

And those SliderExtender have the casecading relative. For this issue I think we can register the valueChanged event to SliderExtender like below.

 <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
         <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <asp:SliderExtender ID="SliderExtender1" BehaviorID="sliderBehavior1" TargetControlID="TextBox1" runat="server" Minimum="0" Maximum="100"></asp:SliderExtender>
        <asp:SliderExtender ID="SliderExtender2" BehaviorID="sliderBehavior2" TargetControlID="TextBox2"  runat="server" Minimum="100" Maximum="200"></asp:SliderExtender>
          <script>
              function pageLoad(sender, e) {
                  var slider = $find('sliderBehavior1');
                  slider.add_valueChanged(onValueChanged);


              }
              function onValueChanged(sender, e) {
                 
                   $find('sliderBehavior2').set_Value(sender._value+100);
                   
              }
    </script>
    </div>

Hope that helps, thanks.

Best Regards!

Answer 2

User1735430007 posted

Thank you. I will try your implementation and get back to you soon.