灯丝组滑块的不同手柄

| 我目前正在开发一个需要两个滑块的项目。目前,我正在使用Filamantgroup滑块(http://d.pr/mHp3)。 但是我有一个小问题。我需要两个手柄互不相同。他们看起来不一样。 当我创建自己的滑块时,我只是向句柄添加了一个类而已。一切都很好。
$(\'#slidertest\').each(function() {
       $(\'.ui-slider-handle:first\', this).addClass(\'firstslider-handle-left\')
       $(\'.ui-slider-handle:last\', this).addClass(\'firstslider-handle-right\')
  });
但是现在,我正在使用Filamentgroup滑块。我不知道该怎么做。我一直在寻找解决方案已有一个多月了,但我无法解决。我邮寄了滑块的创建者,但他们认为我的解决方案是正确的。 我认为问题在于如何调用滑块。它不是DIV。我试图给每件事情都分配一个ID,并在可能的每个ID上尝试上面的代码。但是没有任何效果。
<div id=\"licht\">
    <form action=\"#\">
            <fieldset id=\"test\">
                <select name=\"aan\" id=\"aan\">
                    <option value=\"6am\">6u00</option>
                    <option value=\"6.5am\">6u30</option>
                    <option value=\"7am\">7u00</option>
                    <option value=\"7.5am\">7u30</option>
                    <option value=\"8am\">8u00</option>
                    <option value=\"8.5am\">8u30</option>
                    <option value=\"9am\">9u00</option>
                    <option value=\"9.5am\">9u30</option>
                    <option value=\"10am\" selected=\"selected\">10u00</option>
                    <option value=\"10.5am\">10u30</option>
                    <option value=\"11am\">11u00</option>
                    <option value=\"11.5am\">11u30</option>
                    <option value=\"12am\">12u00</option>
                    <option value=\"12.5pm\">12u30</option>
                    <option value=\"1pm\">1u00</option>
                    <option value=\"1.5pm\">1u30</option>
                    <option value=\"2pm\">2u00</option>
                    <option value=\"2.5pm\">2u30</option>
                    <option value=\"3pm\">3u00</option>
                    <option value=\"3.5pm\">3u30</option>
                    <option value=\"4pm\">4u00</option>
                    <option value=\"4.5pm\">4u30</option>
                    <option value=\"5pm\">5u00</option>
                    <option value=\"5.5pm\">5u30</option>
                    <option value=\"6pm\">6u00</option>
                    <option value=\"6.5pm\">6u30</option>
                    <option value=\"7pm\">7u00</option>
                    <option value=\"7.5pm\">7u30</option>
                    <option value=\"8pm\">8u00</option>
                    <option value=\"8.5pm\">8u30</option>
                    <option value=\"9pm\">9u00</option>
                    <option value=\"9.5pm\">9u30</option>
                    <option value=\"10pm\">10u00</option>
                    <option value=\"10.5pm\">10u30</option>
                    <option value=\"11pm\">11u00</option>
                    <option value=\"11.5pm\">11u30</option>
                    <option value=\"12pm\">12u00</option>
                    <option value=\"1am\">1u00</option>
                    <option value=\"1.5am\">1u30</option>
                    <option value=\"2am\">2u00</option>
                    <option value=\"2.5am\">2u30</option>
                    <option value=\"3am\">3u00</option>
                    <option value=\"3.5am\">3u30</option>
                    <option value=\"4am\">4u00</option>
                    <option value=\"4.5am\">4u30</option>
                    <option value=\"5am\">5u00</option>
                    <option value=\"5.5am\">5u30</option>
                    <option value=\"6am\">6u00</option>
                </select>

                <select name=\"uit\" id=\"uit\">
                    <option value=\"6am\">6u00</option>
                    <option value=\"6.5am\">6u30</option>
                    <option value=\"7am\">7u00</option>
                    <option value=\"7.5am\">7u30</option>
                    <option value=\"8am\">8u00</option>
                    <option value=\"8.5am\">8u30</option>
                    <option value=\"9am\">9u00</option>
                    <option value=\"9.5am\">9u30</option>
                    <option value=\"10am\">10u00</option>
                    <option value=\"10.5am\">10u30</option>
                    <option value=\"11am\">11u00</option>
                    <option value=\"11.5am\">11u30</option>
                    <option value=\"12am\">12u00</option>
                    <option value=\"12.5pm\">12u30</option>
                    <option value=\"1pm\">1u00</option>
                    <option value=\"1.5pm\">1u30</option>
                    <option value=\"2pm\">2u00</option>
                    <option value=\"2.5pm\">2u30</option>
                    <option value=\"3pm\">3u00</option>
                    <option value=\"3.5pm\">3u30</option>
                    <option value=\"4pm\">4u00</option>
                    <option value=\"4.5pm\">4u30</option>
                    <option value=\"5pm\">5u00</option>
                    <option value=\"5.5pm\">5u30</option>
                    <option value=\"6pm\">6u00</option>
                    <option value=\"6.5pm\">6u30</option>
                    <option value=\"7pm\">7u00</option>
                    <option value=\"7.5pm\">7u30</option>
                    <option value=\"8pm\">8u00</option>
                    <option value=\"8.5pm\">8u30</option>
                    <option value=\"9pm\" selected=\"selected\">9u00</option>
                    <option value=\"9.5pm\">9u30</option>
                    <option value=\"10pm\">10u00</option>
                    <option value=\"10.5pm\">10u30</option>
                    <option value=\"11pm\">11u00</option>
                    <option value=\"11.5pm\">11u30</option>
                    <option value=\"12pm\">12u00</option>
                    <option value=\"1am\">1u00</option>
                    <option value=\"1.5am\">1u30</option>
                    <option value=\"2am\">2u00</option>
                    <option value=\"2.5am\">2u30</option>
                    <option value=\"3am\">3u00</option>
                    <option value=\"3.5am\">3u30</option>
                    <option value=\"4am\">4u00</option>
                    <option value=\"4.5am\">4u30</option>
                    <option value=\"5am\">5u00</option>
                    <option value=\"5.5am\">5u30</option>
                    <option value=\"6am\">6u00</option>
                </select>
            </fieldset>
    </form>
    </div>
我真的希望你们能帮助我。 提前致谢!     
已邀请:
我进入了Filament Group的演示页面,并粘贴到JSBin此处:http://jsbin.com/acafo4 我使用此jQuery将左右类添加到句柄:
$(\'.ui-slider .ui-slider-handle\').eq(0).addClass(\'ui-slider-handle-left\');
$(\'.ui-slider .ui-slider-handle\').eq(1).addClass(\'ui-slider-handle-right\');
然后为它们设置样式,如下所示。 .ui-slider选择器很重要,因为它使这种样式比他们使用的样式更具选择性,从而使您不必放置!重要的到处。
.ui-slider .ui-slider-handle-left {
  background-image: none;
  background-color: red;
  border-radius: 100%;
}
.ui-slider .ui-slider-handle-right {
  background-image: none;
  background-color: green;
  border-radius: 0;
希望这可以帮助!     
看起来这些句柄已经具有ID,请尝试以下操作:
/* Handle A Default */
#handle_valueA.ui-state-default {
 background:#f80 url();
 border: #f80 1px solid;
}
/* Handle A Hover */
#handle_valueA.ui-state-hover {
 background:#444 url();
 border: #555 1px solid;
}

/* Handle B Default */
#handle_valueB.ui-state-default {
 background:#444 url();
 border: #555 1px solid;
}
/* Handle B Hover */
#handle_valueB.ui-state-hover {
 background:#f80 url();
 border: #fc0 1px solid;
}
确保在默认样式之后包含此CSS,否则您可能需要在每行之后添加!important标志     

要回复问题请先登录注册