我想自定义JQueryUI滑块但无法找到任何方法来更改滑块手柄图像.JQuery Themeroller似乎也不允许更改句柄图像.有人知道怎么做吗?
我正在使用一个JQuery UI滑块,它有两个手柄(也就是范围滑块).我知道如何设置第一个句柄的样式:
.ui-slider-horizontal .ui-slider-handle {background: white url(https://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;}
Run Code Online (Sandbox Code Playgroud)
但是我如何以不同的方式设计第二个手柄?
使用Firebug我可以看到Jquery没有唯一标识每个句柄:
<div id="hourlyRateSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-widget-header" style="left: 26%; width: 46%;"/>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 26%;"/>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 72%;"/>
</div>
Run Code Online (Sandbox Code Playgroud)
所以我想我必须使用CSS子选择器,这可能是跨浏览器问题.或者我可以使用一些JQuery技巧将CSS类添加到第二个句柄?有人以前整齐地做过这件事吗?