灯丝组滑块不同的手柄

Question

我目前正在开发一个需要两个滑块的项目。目前我正在使用 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>

我真的希望你们能帮助我。 提前致谢！

Answer 1

我将 Filament Group 的演示页面粘贴到 JSBin 中： http://jsbin.com/acafo4

我使用了这个jQuery 添加 left &正确的类到手柄：

$('.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;

希望这有帮助！

Answer 2

看起来这些句柄已经有一个 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 标志