Filamentgroup slider different handles_问答_开发者

I'm currently working on a project for which I need two sliders.. Currently I'm using the Filamantgroup slider (http://d.pr/mHp3).

But I have a little problem.. I need my two handles to be different from each other. They can't look the same.

When I created my own sliders, I just added a class to the handles and that was it. Everything worked out great..

$('#slidertest').each(function() {
       $('.ui-slider-handle:first', this).addClass('firstslider-handle-left')
       $('.ui-slider-handle:last', this).addClass('firstslider-handle-right')
  });

But now, with the Filamentgroup slider I'm using. I can't figure out how to do that. I've been looking for solutions for over a month now and I can't figure it out. I mailed the creators of the sliders, but they thought my solution was the right one.

I think the problem is how I can call on the slider. It isn't a DIV. I tried to give every single thing an ID and tried it the code above on every ID possible. But nothing worked.

<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>
                    <o开发者_JAVA百科ption 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>

I really hope you guys can help me. Thanks in advance!

I took the Filament Group's demo page and pasted into JSBin here: http://jsbin.com/acafo4

I used this jQuery to add left & right classes to the handles:

$('.ui-slider .ui-slider-handle').eq(0).addClass('ui-slider-handle-left');
$('.ui-slider .ui-slider-handle').eq(1).addClass('ui-slider-handle-right');

Then styled them as shown below. The .ui-slider selector is important because it makes this style more selective than the ones they've used, saving you from having to put ! important everywhere.

.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;

Hope this helps!

It looks like those handles already have an ID, try this:

/* 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;
}

Make sure this css is included after the default styling, or else you might need to add an !important flag after each line