更改第一个手柄左侧的jquery滑块背景颜色

Question

我有一个jquery范围滑块，但现在我想为它添加一个额外的功能。

我希望手柄的左侧是另一种颜色而不是右侧。 我做了一个模拟，所以很清楚我的意思。

我已经找到了获得最小值的方法：

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

我找到了从第一个滑块

获取值的代码

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

但现在我有点不知道如何继续。希望有人可以帮助我！

编辑： 创建了一个jsfiddle页面，使其更容易一些：http://jsfiddle.net/BxY99/12/

Answer 1

得到了Kim，

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>");

Answer 2

如果您使用的是http://docs.jquery.com/UI/API/1.8/Slider，那么我认为如果不改变实际的实现，这是不可能的。那个由左到右的单个Div元素组成