CODEWITHSUNDEEP
jqueryjquery-ui
DotnetDude
DotnetDude

Reputation: 11807

JQuery Slider handle position() doesn't work

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

Based on the answer at Using offset and 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

Edit: 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>

Upvotes: 3

Views: 6782

Answers (2)

Jochem
Jochem

Reputation: 1

No need for fuzzy coding. The ui has a handle which has a offsetLeft and a offsetTop.

This is all you need:

var posLeft = ui.handle.offsetLeft;

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630429

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"></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>

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; }

Upvotes: 2

Related Questions