Answered by:
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.
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