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)
Change History (2)
Changed January 20, 2009 08:50PM UTC by comment:1
Changed January 20, 2009 10:36PM UTC by comment:2
milestone: | TBD → 1.6 |
---|---|
resolution: | → worksforme |
status: | new → closed |
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.
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.