ansaurus

Question

JQuery Slider handle position() doesn't work

Answer 1

A:

I think there's a problem with your markup (initial value element width?), or not firing this after elements are ready. In any case, here's a full 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"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
    <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>

The code's very spaced out, hopefully to help you find the issue quicker. The css changes are just me centering the value on top the slider more precisely, change to whatever position you want it to be in of course. To check width of your value element, try defining this css, that may be your only issue, can't be certain without seeing the markup:

#value1 { border: solid 1px red; }

Nick Craver 2010-03-07 18:54:30

@Nick - I still can't get the position right. I have updated my post with the markup. The width attribute might be causing the issue?

DotnetDude 2010-03-07 19:08:43

ansaurus

tags:

views:

answers:

JQuery Slider handle position() doesn't work

related questions