Skip to main content

Search and Top Navigation

#3893 closed bug (worksforme)

Opened January 20, 2009 08:46PM UTC

Closed January 20, 2009 10:36PM UTC

Last modified May 16, 2010 03:22PM UTC

Slider positioning does not take handle with into account

Reported by: wichert Owned by:
Priority: critical Milestone: 1.7
Component: ui.slider Version: 1.6rc5
Keywords: Cc:
Blocked by: Blocking:
Description

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") ],
                  });
Attachments (1)
  • slider.png (3.7 KB) - added by wichert January 20, 2009 08:47PM UTC.

    Handle positioned too far to the right

Change History (2)

Changed January 20, 2009 08:50PM UTC by wichert comment:1

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.

Changed January 20, 2009 10:36PM UTC by scottgonzalez comment:2

milestone: TBD1.6
resolution: → worksforme
status: newclosed

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.