Reputation: 6246
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
Upvotes: 1
Views: 5733
Reputation: 980
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
Upvotes: 5