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: .html

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

Thanks in advance

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./examples/6473423467/example.html

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

Thanks in advance

• javascript
• jquery
• css
• jquery-ui
• jquery-ui-slider

Share Improve this question Follow asked Jan 12, 2012 at 12:19 ChrisChris 6,2661212 gold badges5050 silver badges6262 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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./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./svn/trunk/demos/slider/side-scroll.html

More info on the subject:

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