Блог

В настоящее время я работаю над проектом, для которого мне нужны два слайдера.. В настоящее время я использую ползунок 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. Я попытался присвоить каждой отдельной вещи идентификатор и попробовал использовать приведенный выше код для каждого возможного идентификатора. Но ничего не сработало.

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

Я действительно надеюсь, что вы, ребята, сможете мне помочь.
Заранее спасибо!

Я взял демонстрационную страницу Filamentgroup и вставил в JSBin здесь: http://jsbin.com/acafo4

Я использовал этот jQuery для добавления классов left и right к дескрипторам:

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

Надеюсь, это поможет!

Похоже, что у этих дескрипторов уже есть идентификатор, попробуйте это:

 /* 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 после каждой строки