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

【问题标题】：Change jquery slider background-color on the left side of the first handle更改第一个句柄左侧的 jquery 滑块背景颜色
【发布时间】：2011-05-21 18:39:33
【问题描述】：

我有一个 jquery range-slider，但现在我想给它添加一个额外的功能。

我希望手柄的左侧与右侧不同。我做了一个小模型，所以我的意思很清楚。

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

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

我找到了从第一个滑块获取值的代码

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

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

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

【问题讨论】：

带有当前滑块和/或 jsFiddle 的示例页面将有很大帮助。
完成，将其作为编辑放在原始帖子中..
@PixelProof . 我们可以为水平条形图设置三个范围选择器

标签： jquery colors slider handle

【解决方案1】：

知道了，金，

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

【讨论】：

天啊！非常感谢你。真的。非常感谢.. 这太棒了！

【解决方案2】：

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

【讨论】：