locked
Multiple dependent slider Control RRS feed

  • 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.

    Thursday, March 20, 2014 11:32 AM

Answers

  • 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!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 21, 2014 2:32 AM

All replies

  • 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!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 21, 2014 2:32 AM
  • User1735430007 posted

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

    Friday, March 21, 2014 3:57 PM