Jquery Range Slider Handle css不工作?

时间:2012-06-21 17:43:45

标签: javascript jquery-ui

在我的jsp页面中有2个范围滑块。一个是基于TIME(0-24小时)按结果筛选,另一个是基于FARE(0,1000)的筛选结果。我正在使用jquery UI滑块。我想为每个滑块提供不同/单独的滑块手柄。我更改了CSS但第二个滑块手柄覆盖了第一个滑块手柄?我怎样才能实现单独的句柄?我的代码在这里[我的示例代码] [1]:http://jsfiddle.net/hari034/ypAdf/。我正在使用query.ui.core.js,jquery.ui.widget.js,jquery.ui.mouse.js,uery.slider.js,query-ui-custom.css文件。

1 个答案:

答案 0 :(得分:0)

您可以使用不同的div包装

来设置不同的样式

HTML

<table>
<tr>
  <td colspan="2" nowrap="nowrap">
    <div class="timesliderwrap">
       <div id="track6" class="...">
      <a id="track_time" style="..." href="#"></a>
     </div>
   </div>
 </td>
</tr>
 <!--Slider For Filter By Fare-->
 <tr valign="top">
    <td colspan="2">
       <div class="faresliderwrap">
          <div id="track7" class="..." style="...">
            <a id="track_price"  style="left: 0%;" class="..." href="#"></a>
          </div>
       </div>
    </td>
</tr>
</table>

CSS

.timesliderwrap .ui-slider-horizontal-time .ui-state-default {background:url(images/time_indicator1.gif) no-repeat scroll 50% 50%;}

.faresliderwrap .ui-slider-horizontal-price .ui-state-default {background:url(images/price_indicator1.gif) no-repeat scroll 50% 50%;}