Ползунок диапазона jQueryUI, показывающий прогресс

Question

У меня есть ползунок range: true, и я хочу показать прогресс, как индикатор выполнения между двумя ручками ползунка. Вроде как, http://jsfiddle.net/cG8qB/,, за исключением того, что это будет происходить между двумя ручками моего ползунка вместо всего ползунка, как в этом примере, и мне нужно только обновление цвета вместо ручки ползунка.

Так что, в основном, я хочу изменить цвет детали между двумя ручками ползунка на что-то вроде поведения ползунка range: min, где "min" - это левая ручка моего ползунка и ручка этого range: min слайдер скрыт.

Answer 1

Оказывается, что ответ был в оригинальном jsfiddle все время

Это делает трюк.

$("#slider").find('.ui-widget-header').css('width', x + '%');

Это также работает.

$("#slider div").css('width', x + '%');

Answer 2

Вы можете просто скрыть ручку, добавив следующее правило CSS:

.ui-slider-handle { display: none }

Тогда вы можете захотеть отключить ползунок, чтобы пользователь не мог изменить его, то есть добавить disabled: true к инициации.

Смотрите это в действии: http://jsfiddle.net/william/cG8qB/8/.