Ui slider jquery

[margo]

Добрый день.

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

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

Вот мой код:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript" src="js/jquery.ui-slider.js"></script>

<div class="white_div">      РЕЙТИНГ НА САЙТЕ, %              ОТ <input type="text" id="rating1" size="2" value="0"  > ДО <input type="text" id="rating2" size="2" value="100"  >             <div  class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider"></div>            </div>

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

/*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; } 

Помогите пожалуйста разобраться с этим примером.

Ненашла где тут вложение делать, чтоб показать свой пример. Результат работы моего скрипта можно глянуть тут: http://hrmhelper.com/layout/ispolniteli_compare.html (в левом столбце там где рейтинг на сайте там полоса по которой должны бегать ползунки есть, а самих ползунков нет, побокам должны быть два ползунка, как в примере ).

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

[Catherine]

Используйте подходящие примеры и код из первоисточника.