Slider positioning does not take handle with into account

[wichert]

This is a regression from rc2 to rc4.

When positioning the handle their width is not taken into account, and the result is that they are positioned too far to the right.

I will attach a screenshot of the slider to this ticket.

For reference our markup looks like this:

<fieldset id="price">
  <label style="left:0">Min <abbr>€</abbr> <input value="0" id="minimumPrice" name="price_min" type="text" /></label>
  <label style="left:180px">Max <abbr>€</abbr> <input value="4300" id="maximumPrice" name="price_max" type="text" /></label>
</fieldset>

and it is initialized like this:

var max_price = 4300;

$("#price")
    .find("label").addClass("ui-slider-handle").end()
    .slider({
        range    : true,
        min      : 0,
        max      : max_price,
        values   : [ $("#minimumPrice").attr("value"),
                     $("#maximumPrice").attr("value") ],
                  });

[wichert]

Handle positioned too far to the right

[wichert]

Possibly related remark: I am told that the use of percentages for positioning the handles as the slider plugin does now (as of r1230) makes it much harder to do styling in IE.

[Scott González]

With the new CSS framework, we have changed the behavior of the slider. The handles are no longer contained within the range, instead they are meant to be centered over the current value. This means that when the value is at either end, half of the handle will appear outside of the range. This implementation allows us to ignore the size of the handle as well as being positioned correctly even if the size of the slider changes.

To achieve the new look, you will need to set the left-margin of the handle(s) to be half of their width. You can see the CSS themeroller uses at ​http://jquery-ui.googlecode.com/svn/trunk/themes/base/ui.slider.css. If you have any questions or concerns about this, feel free to start a discussion on the ​jquery-ui-dev group or leave a comment on the ​design wiki.