locked
Slider value to textbox RRS feed

  • Question

  • Good day everyone, I hope I have chosen the right place to post this.

    The problem is this. If I use the Jquery 'generic' slider I can transfer the value of the slider to a textbox with this code

    $(

    "#<%=TextBox1.ClientID%>").val(ui.value);

    But I want to use the slightly more funky slider with 'pips' (for pips read numbers showing on your slider!). Despite a big Google search and monkeying with it for ages I can't find a way of getting the slider value into my textbox. Below is the whole page of code (HTML and Jquery)

    If anyone has any ideas I would very much appreciate the help

    Thanks

    Peter

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="Slider_pips.WebForm1" %>
    
    <!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>Slider testing with pips</title>
    
           
    <link href="Styles/jquery-ui-slider-pips.css" rel="stylesheet" type="text/css" />
    
    
        <!-- include the jQuery and jQuery UI scripts -->
    <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script src="Scripts/jquery-ui-slider-pips.js" type="text/javascript"></script>              
    
    
    <!-- plus a jQuery UI theme, here I use "flick" -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css"/>
    
        <style type="text/css">
            .slider
            {
                width: 740px;
            }
        </style>
    
    
    </head>
    
    
    
    <body>
    
        <form id="form1" runat="server">
    
         <!-- Added for spacing at the top of the page - PW -->
    
        <p />
        
        <br />
    
    
    
        <!-- This is number 1 slider - PW -->
        
        <div>
    
        <asp:Label ID="Label1" runat="server" Text="Slider 1 value"></asp:Label>  
            <asp:TextBox ID="TextBox1" runat="server" style="margin-left: 16px"></asp:TextBox>
            <br />
    
        <br />
    
    <div class="slider"></div>
    
        </div>
    
        <br />
    
    
    
    
        <!-- This is number 2 slider - PW -->
    
        <div>
    
        <asp:Label ID="Label2" runat="server" Text="Slider 2 value"></asp:Label> 
            <asp:TextBox ID="TextBox2" runat="server" style="margin-left: 16px"></asp:TextBox>
            <br />
    
        <br />
    
    <div class="slider"></div>
    
        </div>
    
        <br />
    
    
    
        <!-- This is number 3 slider - PW -->
    
    
        <div>
    
        <asp:Label ID="Label3" runat="server" Text="Slider 3 value"></asp:Label>  
            <asp:TextBox ID="TextBox3" runat="server" style="margin-left: 16px"></asp:TextBox>
            <br />
    
        <br />
    
    <div class="slider"></div>
    
        </div>
    
        <br />
        
    
    
        <!-- This is number 4 slider - PW -->
        
    
       <div>
    
        <asp:Label ID="Label4" runat="server" Text="Slider 4 value"></asp:Label>  
            <asp:TextBox ID="TextBox4" runat="server" style="margin-left: 16px"></asp:TextBox>
           <br />
    
        <br />
    
    <div class="slider"></div>
    
        </div>
    
        <br />
    
        <!-- This is number 5 slider - PW -->
    
    
       <div>
    
        <asp:Label ID="Label5" runat="server" Text="Slider 5 value"></asp:Label> &nbsp;<asp:TextBox 
               ID="TextBox5" runat="server" style="margin-left: 16px"></asp:TextBox>
           <br />
    
        <br />
    
    <div class="slider"></div>
    
        </div>
    
        <br />
    
    
    
    
        <!-- Need to add the input function even if the textboxes are hidden, also need to duplicate 5 times - PW -->
    
    
            <script type="text/javascript">
    
         $(".slider").slider().slider("pips");
             
        $(".slider").slider({
            min: 1,
            max: 10,
            step: 1
               
        })
    
        .slider("pips", {
           
            rest: "label"
           
        });
    
            </script>
    
    
    
    
    
        </form>
        
        </body>
    
    
    </html>
    
    
    


    Wednesday, June 10, 2015 1:19 PM

All replies

  • Here is the solution Peter http://stackoverflow.com/questions/30775635/getting-pips-slider-value-into-a-textbox
    • Edited by pw2002uk Sunday, June 14, 2015 4:21 PM
    Sunday, June 14, 2015 2:02 PM