Добрый день.
Помогите пожалуйста реализовать следующую задачу: ползунок выбора диапазона (смотреть во вложении ), у меня на странице их 9 штук и у каждого разные граничные значения.

Искала в инете и нашла подходящий пример http://www.xiper.net/collect/js-plugins/ui...-ui-slider.html с описанием, но адаптировать под свой не получается. У меня только полоса выводится, а самих ползунков почемуто нет, хотя путь в цсс поменяла к своей картинке.

Вот мой код:





[JS]
<script type="text/javascript">
jQuery("#slider").slider({
min: 0,
max: 100,
values: [0,100],
range: true,

});
</script>

[/JS]

[CSS]
/*Ui-slider*/

/* Ширина слайдера */
#slider {
width: 112px;
}
/* Контейнер слайдера */
.ui-slider {
position: relative;
}
/* Ползунок */
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 7px; /* Задаем нужную ширину */
height: 19px; /* и высоту */
background: url(../images/ispolniteli_compare/pol.png) no-repeat; /* картинка изображающая ползунок. Или можно залить цветом, задать бордюр и скругления */
cursor: pointer
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
overflow: hidden;
}
/* горизонтальный слайдер (сама полоса по которой бегает ползунок) */
.ui-slider-horizontal {
height: 2px; /* задаем высоту согласно дизайна */
}
/* позиционируем ползунки */
.ui-slider-horizontal .ui-slider-handle {
top: -5px;
margin-left: -6px;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
/* оформление полосы по которой ходит ползунок */
.ui-widget-content {
border: 1px solid #ffa15c;
background: #fff;
margin:0 auto;
}
/* оформление активного участка (между двумя ползунками) */
.ui-widget-header {
border: 1px solid #ffa15c;
background: #ff8933;
}

[/CSS]

Помогите пожалуйста разобраться с этим примером или поделитесь если у кого есть готовое проверенное решение или ссылки с подробным описанием.

Заранее спасибо.