Изменить цвет фона ползунка jquery на левой стороне первого маркера - PullRequest
Новая
       18

Изменить цвет фона ползунка jquery на левой стороне первого маркера

1 голос
/ 21 мая 2011

У меня есть слайдер диапазона jquery, но теперь я хочу добавить к нему дополнительную функцию.

Я хочу, чтобы левая сторона ручки была другого цвета, чем правая.Я сделал небольшой макет, чтобы было понятно, что я имею в виду.

enter image description here

Я уже нашел способ получить минимальное значение: 

$(".sleep").slider("option", "min");

иЯ нашел код для получения значения из первого ползунка 

$(".sleep").slider("values", 0)

Но теперь я вроде застрял, как продолжить.Надеюсь, кто-то может мне помочь!

Редактировать: создал страницу jsfiddle, чтобы сделать ее немного проще: http://jsfiddle.net/BxY99/12/

Ответы [ 2 ]

1 голос
/ 22 мая 2011

Понял, Ким,

http://jsfiddle.net/BxY99/14/

Хотите знать, как я получил 8,6?Я не имею ни малейшего понятия, чисто проб и ошибок.Я бы порекомендовал использовать какую-то процентную ширину, но я не могу определить формулу, которая могла бы работать.

Вот объяснение,

CSS для левого концаползунок, эмулирующий ползунок jQuery, 

.customMarker {
    display: block;
    font-size: 0.7em;
    position: absolute;
    z-index: 1;
    background-color:#ff0000;
    top:0;
    left:0;
    height:100%;
}

Мы добавляем маркер к ползунку и обрабатываем событие слайда, чтобы установить его ширину.

var slideVal = 0;
$(".sleep").slider({
          range: true,
          min: 0,
          max: 2879,
          values: [540, 1020],
          step:5,
          animate: true,
          slide: function(event, ui) {
            slideVal = $(".sleep").slider("values", 0) / 8.6;

    $('#values').text(slideVal);
    $('.customMarker').css('width', slideVal + 'px');
}
});

$('.sleep').prepend("<div class='customMarker'></div>");
0 голосов
/ 22 мая 2011

Если вы используете http://docs.jquery.com/UI/API/1.8/Slider, то я не думаю, что это возможно без изменения фактической реализации.Этот элемент состоит из одного элемента Div слева направо

...