Opened 10 years ago

Closed 10 years ago

Last modified 9 years ago

#3893 closed bug (worksforme)

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 10 years ago.
Handle positioned too far to the right

Download all attachments as: .zip

Change History (3)

Changed 10 years ago by wichert

Attachment: slider.png added

Handle positioned too far to the right

comment:1 Changed 10 years ago by 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.

comment:2 Changed 10 years ago by Scott González

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.

Note: See TracTickets for help on using tickets.