[英]Jquery Range Slider Handle css is not working?
in my jsp page having 2 range sliders. 在我的jsp页面中有2个范围滑块。 one is Filter by Result based on TIME(0-24 hrs), another one is filter Result based on FARE(0,1000). 一个是基于TIME(0-24 hrs)的按结果过滤,另一个是基于FARE(0,1000)的过滤结果。 i am using jquery UI slider. 我正在使用jquery UI滑块。 I want different/separate slider handle for each slider. 我想为每个滑块使用不同/单独的滑块手柄。 i changed css but the second slider handle overwriting first slider handle? 我更改了CSS,但第二个滑块手柄覆盖了第一个滑块手柄? how can i achieve separate handles? 如何获得单独的手柄? my code is here [my Sample code][1]: http://jsfiddle.net/hari034/ypAdf/ . 我的代码在这里[我的示例代码] [1]: http : //jsfiddle.net/hari034/ypAdf/ 。 i am using query.ui.core.js,jquery.ui.widget.js,jquery.ui.mouse.js,uery.slider.js,query-ui-custom.css files. 我正在使用query.ui.core.js,jquery.ui.widget.js,jquery.ui.mouse.js,uery.slider.js,query-ui-custom.css文件。
You can style them diferently using a different div wrapping 您可以使用不同的div包装为它们设置不同的样式
<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>
.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%;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.