All geek questions in one place

JQuery () slider handle position not working

I have a div that displays the current value of the slider, and the div moves with the position of the slider.

Based on the answer in Using Offset and the jQuery Slider

I came up with the following code:

function SliderSetup()
{
    $("#slider").slider({
            value:0,
            min: -10,
            max: 10,
            step: 2,
            animate:false,
            slide: function(event, ui) {
                setTimeout(showVal, 10);
            }
        });

    $("#slider").slider("value", 0);
    showVal();  //setTimeout(showVal, 10) does not work either
}

function showVal() {

var position = $('.ui-slider-handle:first').position();  //i tried offset()-didnt work
var value = $('#slider').slider('value');
$('#value1').text(value).css({'left':position.left});
}

The div position is correct when the user uses the slider, but by default the value is not in the correct position. Screenshot below

alt text

Change: markup

                                <tr>
                                    <td width="30%">
                                        <h2>
                                            Select Value</h2>
                                    </td>
                                    <td width="60%">
                                        <div id="value1">&nbsp;</div>
                                        <div id="slider">
                                        </div>
                                    </td>
                                    <td>
                                        <div id="myDiv">
                                        </div>
                                    </td>
                                </tr>
+3
source share
2 answers

I think there is a problem with your markup (the width of the element of the initial value?) Or not start it after the elements are ready. In any case, here is a complete working sample:

<html>
  <head>    
    <title>Test</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
    <style type="text/css">
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
      function SliderSetup()
      {
          $("#slider").slider({
                  value:0,
                  min: -10,
                  max: 10,
                  step: 2,
                  animate:false,
                  slide: function(event, ui) {
                      setTimeout(showVal, 10);
                  }
              });    
          $("#slider").slider("value", 0);
          showVal();
      }
      function showVal() {
        var slider = $('.ui-slider-handle:first');
        var position = slider.offset();
        var value = $('#slider').slider('value');
        var val = $('#value1');
        val.text(value).css({'left':position.left + ((slider.width() - val.width()) /2), 'top':position.top -20 });
      }     
      $(function(){  
        SliderSetup();
      });
    </script>
  </head>
  <body>
    <br/><br/><br/>
    <div id="value1" style="position: absolute"></div>
    <div id="slider"></div>
  </body>
</html>

, , . css - , , , , . value, css, , , :

#value1 { border: solid 1px red; }
+2

. ui handle, offsetLeft a offsetTop.

, :

var posLeft = ui.handle.offsetLeft;
0

Source: https://habr.com/ru/post/1735813/

More articles:


All Articles