locked
Ajax Number Slider Newbie RRS feed

  • Question

  • User-1776233328 posted

    I am trying to create a simple calculator with an ASP.Net  ajax slider - I have the basic slider working with text field to display the values. I would like to add additional labels that display the result of formulas based on the slider value.  

    <div>
      <asp:TextBox ID="Slider1" runat="server" OnTextChanged="Slider1_TextChanged"></asp:TextBox>
      <br />
      <asp:Label ID="Label2" runat="server" server="" Text="PSP Budget Amount" Width="150"></asp:Label>
      <asp:TextBox ID="Slider1_Boundcontrol" ToolTip="Display Value?" runat="server" Width="75" style="text-align:right" 
    OnTextChanged="Slider1_Boundcontrol_TextChanged"></asp:TextBox> <br /> <br /> <ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" BehaviorID="Slider1" TargetControlID="Slider1"
    BoundControlID="Slider1_Boundcontrol" Orientation="Horizontal" EnableHandleAnimation="true" /> <br /> </div>
    Friday, January 19, 2018 2:07 PM

All replies

  • User-1838255255 posted

    Hi amevy,

    According to your description, i make a sample with sliderextender through your needs, please check:

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#TextBox3").change(function () {
                    debugger;
                    var number1 = parseFloat($(this).val());
                    var number2 = parseFloat($("#Label2").text());
                    $("#Label3").text(number1 + number2);
                })
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
            </asp:ToolkitScriptManager>
            <span class="style2"><strong>Move the Silder and See the output</strong></span>:-<asp:UpdatePanel ID="UpdatePanel1"
                runat="server">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox3" runat="server" Height="23px"
                        Style="font-size: large" Width="216px"></asp:TextBox>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <asp:Label ID="Label1" runat="server"
                        Style="font-weight: 700; color: #800000; font-size: x-large" Text="Label"></asp:Label>+
                    <asp:Label ID="Label2" runat="server"
                        Style="font-weight: 700; color: #800000; font-size: x-large" Text="10"></asp:Label>=
                    <asp:Label ID="Label3" runat="server"
                        Style="font-weight: 700; color: #800000; font-size: x-large" Text=""></asp:Label>
    
                    <asp:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="TextBox3"
                        BoundControlID="Label1" EnableHandleAnimation="true" Minimum="0" Maximum="500"
                        Steps="500" TooltipText="Move Slider" Orientation="Horizontal">
                    </asp:SliderExtender>
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>
    </body>

    Result:

    Best Regards,

    Eric Du 

    Tuesday, January 23, 2018 2:52 AM