如何在 jQuery UI Slider 上设置 3 种不同的颜色 [英] How to set 3 different colors at jQuery UI Slider

问题描述

我正在使用这个

解决方案

如果您正在寻找 JS 解决方案，这就是我解决问题的方式，使用幻灯片"事件.

slide: function (event, ui) {var totalWidth = $(".slider").width();$(".left-color").width((ui.values[0])/100 * totalWidth);},

I'm using this UI Slider. I've to make this slider with 3 different colors for:

1. Handle Color
2. Previous portion of Handle
3. Next portion of Handle

Something like this:

So far, I'm able to put handle color only:

But, How can I set two more different color (one is for previous portion of Handle and another is for next portion of handle like the first screenshot)? Is there any way adding two different classes by jQuery and style those classes like:

.handle-previous-slider {
  background: yellow;
}
.handle-next-slider {
  background: green;
}

? So far, my result at fiddle

解决方案

If you're looking for a JS solution, this is how I approached the problem, using the "slide" event.

slide: function (event, ui) {
    var totalWidth = $(".slider").width();
    $(".left-color").width((ui.values[0]) / 100 * totalWidth);
},

这篇关于如何在 jQuery UI Slider 上设置 3 种不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！