locked
need help with slider javascript RRS feed

  • Question

  • User484556312 posted

    hi guys, 

    im using a ranger slider from : http://jqueryui.com/slider/#custom-handle 

    i just want to know how do i assign the value to a label. thank you 

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      
      <style>
      #custom-handle {
        width: 3em;
        height: 1.6em;
        top: 50%;
        margin-top: -.8em;
        text-align: center;
        line-height: 1.6em;
      }
      </style>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
          $(function () {
              var handle = $("#custom-handle");
              $("#slider").slider({
                  create: function () {
                      handle.text($(this).slider("value"));
                  },
                  slide: function (event, ui) {
                      handle.text(ui.value);
                  }
              });
          }
          );
    
          
      </script>
    
    
        <div id="slider">
        <div id="custom-handle" class="ui-slider-handle"></div>
    </div>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    Tuesday, January 10, 2017 8:32 AM

All replies

  • User-573138384 posted

    Assign it in same slide event.

     $(function () {
              var handle = $("#custom-handle");
              $("#slider").slider({
                  create: function () {
                      handle.text($(this).slider("value"));
                  },
                  slide: function (event, ui) {
                      handle.text(ui.value);
                      $('[id*=Label1]').html(ui.value);
                  }
              });
          }
          );

    Tuesday, January 10, 2017 8:47 AM
  • User484556312 posted

    thanks for the answer fayaz, i just started on javascript recently. 

    one more question, how to assign the the value to label if im using input type="range" instead ? i've tried doing this but did not work.

    <input type="range" name="" min="0" max="200" onchange="updateTextInput(this.value);"/>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    
    <script>
            function updateTextInput(val) {
               $('[id*=Label1]').value = val;           
            }
    </script>
    
    
    

    thank you !

    Tuesday, January 10, 2017 9:18 AM
  • User-573138384 posted

    You need to add few more events apart from onchange, add onkeypress, onblur and have same function to be called.

    To set value, $('[id*=Label1]').val(val);    

    I recommend you to go through some basics of jQuery, its easy to understand.

    Tuesday, January 10, 2017 10:09 AM