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添加了左边和右边的正确的句柄类：

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

Filamentgroup滑块不同的手柄

2 个答案: