jQuery UI更改滑块句柄宽度？

Question

I would like to make the handle of my slider scale to give a visual que of the range of the slider (like the scrollbar in most browsers for example).

Did a bit of googling and the answer seems to be to modify the .ui-slider-handle class.

I have done this and the handle now runs way off the end: This is the code I am using to set up the slider:

var range = 2 + Math.floor(Math.random() * 10);

$('#slider').slider({max: range});

$('.ui-slider-handle').width($('#slider').width() / range);

Also here is a link to live example: http://tcusers.com/examples/6473423467/example.html

It's as if the library is assuming the old width of the slider, does anyone have any suggestions to accomplish what I want? I'd rather avoid having to hack the jquery ui core library.

Thanks in advance

Answer 1

The problem is in the core of the slider. To move it jQueryUI changes its "left" style from 0% to 100%. The original slide also goes beyond the end, but you dont notice because its a narrow one. Doing it wider you really start to notice that it starts growing begining at 100% of left...

As you can read here: http://bugs.jqueryui.com/ticket/4398 , there is no built-in solution.

But they point to a solution that: This is done by setting the margin-left variably (between 0 and handle-width) as the handle slides from slider min to slider max.

Here: http://jquery-ui.googlecode.com/svn/trunk/demos/slider/side-scroll.html

More info on the subject:

http://osdir.com/ml/jquery-ui/2009-03/msg00886.html