Javascript jQuery UI滑块-仅在处理程序/滑块/标记之间更改背景颜色

我正在使用jQueryUI滑块。我有多个hanldes，range设置为false。有没有一种方法可以为两个控制柄/滑块/标记之间的范围添加颜色，无论您如何称呼它们？我还没有找到解决这个问题的办法

这是我正在使用的代码/初始化

    var initialValues = [180, 435, 1080, 1320],
    updateValue = function (ui) {
    var hours = Math.floor(ui.value / 60);
    var minutes = ui.value - (hours * 60);

    if (hours.length == 1) hours = '0' + hours;
    if (minutes.length == 1) minutes = '0' + minutes;
    if (minutes == 0) minutes = '00';
    if (hours >= 12) {
        if (hours == 12) {
            hours = hours;
            minutes = minutes + " PM";
        } else {
            hours = hours - 12;
            minutes = minutes + " PM";
        }
    } else {
        hours = hours;
        minutes = minutes + " AM";
    }
    if (hours == 0) {
        hours = 12;
        minutes = minutes;
    }
    //console.log(ui.handle)
    $(ui.handle).attr('data-value', hours + ':' + minutes);
};

var timeLabels = ["12:00 a.m","1:00 a.m","2:00 a.m","3:00 a.m","4:00 a.m","5:00 a.m","6:00 a.m","7:00 a.m","8:00 a.m","9:00 a.m","10:00 a.m","11:00 a.m",
                  "12:00 p.m","1:00 p.m","2:00 p.m","3:00 p.m","4:00 p.m","5:00 p.m","6:00 p.m","7:00 p.m","8:00 p.m","9:00 p.m","10:00 p.m","11:00 p.m", "12:00 p.m"];
(function ($) {
    $.widget('my-namespace.customSlider', $.ui.slider, {
        options: {
            ticks: false
        },

        // Called when the slider is instantiated.
        _create: function() {

            // Call the orginal constructor, creating the slider normally.
            this._super();

            // If the "ticks" option is false or the "step" option is
            // less than 5, there's nothing to do.
            if ( !this.options.ticks || this.options.step < 5 ) {
                return;
            }

            // Setup some variables for rendering the tick marks below the slider.
            var cnt = this.options.min,
                background = this.element.css( "border-color" ),
                left;

            while ( cnt <= this.options.max ) {

                // Compute the "left" CSS property for the next tick mark.
                left = ( cnt / this.options.max * 100 ).toFixed( 2 ) + "%";

                // Creates the tick div, and adds it to the element. It adds the
                // "ui-slider-tick" class, which has common properties for each tick.
                // It also applies the computed CSS properties, "left" and "background".
                //console.log($("</div>"))
                $( "<div/>" ).addClass( "ui-slider-tick" )
                             .appendTo( this.element )
                             .css( { left: left, background: background } );

                cnt += this.options.step;

            }
            console.log(this.element[0].id)
            cnt = this.options.min
            var i = 0;
            while (cnt <= this.options.max) {
                //console.log(timeLabels[i])
                $($(".pct-slider#" + this.element[0].id).find('.ui-slider-tick')[cnt]).append("<div class='tick-labels'>" + timeLabels[i] + "</div>");
                cnt = cnt + 4;
                i++;
            }
            //$(".pct-slider#" + sliders[0]).find('.ui-slider-tick').find('.tick-labels').hide()
        },
        addValue: function( val ) {
            this.options.values.push(val);
            console.log(val)
            var time = convertToTime(val)
            console.log(time)
            this._refresh();
            $($(".ui-slider-handle").last()).attr('data-value', time)
        },
        removeValue: function( ) {
            if (this.options.values.length > 1) {
                this.options.values.pop( );
                this._refresh();
            }
        }
    });
})(jQuery);

var sliders =["mondaySlider", "tuesdaySlider","wednesdaySlider","thursdaySlider","fridaySlider","saturdaySlider","sundaySlider"];

$(".pct-slider#" + sliders[0])
.customSlider({
    min: 0,
    max: 1440,
    step: 15,
    range: false,
    ticks: true,
    values: initialValues,
    create: function (event, ui) {
        $.each( initialValues, function(i, v){
            updateValue({
                value: v,
                handle: $(".pct-slider#" + sliders[0]).find('.ui-slider-handle').eq(i) 
            });
        });
    },
    slide: function (event, ui) {
        var handleIndex = $('a', event.target).index(ui.handle),
            curr = ui.values[handleIndex],
            next = ui.values[handleIndex + 1] - 15,
            prev = ui.values[handleIndex - 1] + 15;

        if (curr > next || curr < prev) {
            return false;
        }

        updateValue(ui);
        //positionSelects();
    }
});

var initialValues=[18043510801320]，
updateValue=函数（ui）{
var小时=数学下限（ui.value/60）；
var分钟=ui.value-（小时*60）；
如果（hours.length==1）hours='0'+小时；
如果（minutes.length==1）分钟='0'+分钟；
如果（分钟==0）分钟='00'；
如果（小时数>=12）{
如果（小时==12）{
小时=小时；
分钟=分钟+“下午”；
}否则{
小时=小时-12；
分钟=分钟+“下午”；
}
}否则{
小时=小时；
分钟=分钟+上午；
}
如果（小时==0）{
小时=12；
分钟=分钟；
}
//console.log（ui.handle）
$（ui.handle.attr（'data-value'，hours+'：'+分钟）；
};
var timeLabels=[“12:00 a.m”，“1:00 a.m”，“2:00 a.m”，“3:00 a.m”，“4:00 a.m”，“5:00 a.m”，“6:00 a.m”，“7:00 a.m”，“8:00 a.m”，“9:00 a.m”，“10:00 a.m”，“11:00 a.m”，
“下午12:00”、“下午1:00”、“下午2:00”、“下午3:00”、“下午4:00”、“下午5:00”、“下午6:00”、“下午7:00”、“下午8:00”、“下午9:00”、“下午10:00”、“下午11:00”、“下午12:00”]；
（函数（$）{
$.widget（'my-namespace.customSlider'，$.ui.slider{
选项：{
滴答声：错
},
//当滑块实例化时调用。
_创建：函数（）{
//调用原始构造函数，正常创建滑块。
这个；
//如果“ticks”选项为false或“step”选项为false
//少于5个，就没什么可做的了。
如果（！this.options.ticks | | this.options.step<5）{
返回；
}
//设置一些用于渲染滑块下方记号的变量。
var cnt=this.options.min，
background=this.element.css（“边框颜色”），
左边
while（cnt1）{
this.options.values.pop（）；
这个；
}
}
});
})（jQuery）；
var sliders=[“周一滑块”、“周二滑块”、“周三滑块”、“周四滑块”、“周五滑块”、“周六滑块”、“周日滑块”]；
$（“.pct滑块”#“+滑块[0]）
.自定义滑块({
分:0,，
最高：1440，
步骤：15，
范围：false，
答：是的，
值：初始值，
创建：函数（事件、用户界面）{
$。每个（初始值、函数（i、v）{
更新值({
值：v，
句柄：$（“.pct slider”#“+sliders[0]）。查找（“.ui slider handle”）。eq（i）
});
});
},
幻灯片：功能（事件、用户界面）{
var handleIndex=$（'a'，event.target）.index（ui.handle），
curr=ui.values[handleIndex]，
next=ui.values[handleIndex+1]-15，
prev=用户界面值[handleIndex-1]+15；
如果（当前>下一个| |当前<上一个）{
返回false；
}
更新值（ui）；
//位置选择（）；
}
});

我试图将div附加到我的句柄上，但当我附加div时，它会使我的句柄消失。我的想法是在两个控制柄上附加一个div，并为该div的背景上色。但这对我来说并不合适

以下是我的初始滑块的外观：

---

我想在控制柄组之间上色

您可以在滑块中添加

div

，并在移动控制柄时调整它们的大小。使用适当的css，它将提供您所描述的效果。您可能需要稍微调整一下，但这会给您一些想法：

HTML

JS

您将看到它并没有完全跟随

幻灯片

事件，部分原因是幻灯片事件仅在移动时触发，所以当您停止时，会有一段时间不更新。但如果在其他事件上运行“调整颜色大小”，可能会得到更好的结果

---

请参阅fiddle:

请发布您的代码并解释您已经尝试过的内容，或者发布一个带有示例的fiddle。我在链接的fiddle中只看到一个句柄。我没有复制我的fiddle链接。现在就试试，太棒了！非常感谢！

//You add divs inside your slider, you need four, the last region will be 
/background of slider
<div class="pct-slider" id="mondaySlider">
     <div class="color-region"></div>
    <div class="color-region"></div>
    <div class="color-region"></div>
    <div class="color-region"></div>  
</div>

 //Make your divs relative and give them color    
.color-region
    {
        position: relative;
        height: 100%;
        float: left;
    }

.color-region:nth-child(1)
{
    background-color: blue;
}
.color-region:nth-child(1)
{
    background-color: blue;
}
.color-region:nth-child(2)
{
    background-color: red;
}
.color-region:nth-child(3)
{
    background-color: yellow;
}
.color-region:nth-child(4)
{
    background-color: green;
}

function resize_colors() {
       //you start at 0 
       var cur_pos = 0;
        $(".ui-slider-handle").each(function (i) {
            //for each handle you check position and set width of corresponding color div
            $('.color-region').eq(i).css('width', $(this).position().left - cur_pos)
          //update cur_pos to calculate next color width  
          cur_pos = $(this).position().left;
        })
    }