如何在 jQuery UI Slider 设置 3 种不同的颜色

Question

我正在使用这个UI滑块。我必须用 3 种不同的颜色来制作这个滑块：

1. 手柄颜色
2. 手柄的前一部分
3. 手柄的下一部分

像这样：

到目前为止，我只能设置手柄颜色：

但是，我如何设置另外两种不同的颜色（一个用于手柄的前一部分，另一个用于手柄的下一部分，如第一个屏幕截图）？有没有办法通过 jQuery 添加两个不同的类并设置这些类的样式，例如：

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

？到目前为止，我的小提琴成绩

Answer 1

如果您正在寻找 JS 解决方案，这就是我解决问题的方法，使用“幻灯片”事件。

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

Answer 2

纯 CSS 解决方案如下所示：

http://jsfiddle.net/qgoq6xm6/

.ui-slider .ui-slider-range:before,
.ui-slider .ui-slider-range:after {
    display:block;
    height:14px;
    content:'';
    background:yellow;
    right:100%;
    top:0px;
    left: -1000px;
    position:absolute;
}

.ui-slider .ui-slider-range:after {
    background:green;
    left:100%;
    right:-1000px;
}

.slider-container {
    overflow:hidden;
    padding:5px
}

所以基本上这将使用绝对位置在蓝色范围 div 之前和之后添加一个 1000px 宽度的元素。 1000px 应该是滑块的宽度，目前您在演示中使用的是 100% 宽度的滑块，所以我仅使用 1000px 作为示例。

您还需要将滑块包装在一个新的 div 中，并设置overflow:hidden，这样它就会切断左侧和右侧的绿色和黄色线条。

Answer 3

您可以通过使用 jQueryUI 的 4自定义主题，将 3 色条纹

linear-gradient()

应用于

.ui-slider

的背景，并将

.ui-slider-range

的背景设置为

transparent 来实现此效果

。

然后你只需要一些代码（或者可能是一些花哨的CSS？）来更新渐变的多个停止点以匹配滑块的选定值。

控制基本上是3层：

• 顶部是手柄。 （它们也可以定制。）
• 中间是两个手柄之间的背景。 (

  .ui-slider-range

  )
• 底部是背景。 (

  .ui-slider

  )

演示片段（如下）的结果是这样的：

const dvRed=29.9, dvGreen=58.7; //defaults
var dvs=[dvRed, dvRed+dvGreen];

$(document).ready( function(){ //setup slider
  $('#slider').slider({
    min: 0,
    max: 100,
    step: 0.1,
    values: dvs,
    range: true,
    slide: function(event, ui) {
      $.each(ui.values, function(i, v) {
        updateSlider(); //update vals on change
      });
    }
  });
  updateSlider(); //initial update of vals
});

function updateSlider(){
  //get slider values
  var R=Math.round($('#slider').slider('values')[0]*10)/10,
    B=Math.round((100-$('#slider').slider('values')[1])*10)/10,
    G=Math.round(((100-(R+B)))*10)/10;

  //set slider track to 3 colors
  $('.ui-slider').css('background','linear-gradient(90deg, red 0% '+R+'%, green '+R+'% '+(G+R)+'%, blue '+(G+R)+'% 100%');

  //center labels between handles
  $('#val1').html(R+'%').css('left',R/2+'%');
  $('#val2').html(G+'%').css('left',R+(G/2)+'%');
  $('#val3').html(B+'%').css('left',R+G+(B/2)+'%');

  //set body background color
  var bg='rgb('+R*2.55+','+G*2.55+','+B*2.55+')';
  $(document.body).css('background', bg);
}

    body{ font-family: Roboto, Helvetica, Arial, sans-serif; }
    #slider_cont{ position:relative; width:60vw; margin:5vh 20vw 10vh; }
    #slider{ width:100%; }
    #slider_vals{ width:100%; }
    #val1{ position:absolute; left:33%; color:red; }
    #val2{ position:absolute; left:50%; color:green; }
    #val3{ position:absolute; left:66%; color:blue; }
    .ui-slider-range { background:transparent !important;}
    .ui-slider{background-image:linear-gradient(90deg, red 0 40%, green 40% 60%, blue 60% 100%);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id='slider_cont'>
  <div id='slider'></div>
  <div id='slider_vals'>
    <div id='val1'></div>
    <div id='val2'></div>
    <div id='val3'></div>
  </div>
</div>

<div id='colors'></div>

Answer 4

对于超过 2 个手柄，ashleedawg 答案中的梯度可以构造如下：

function setSliderColors(handleValues, rangeColors) {
    // Loops through the handles and construct the corresponding sections of the background
    let gradient = 'linear-gradient(to right, ' + rangeColors[0] + ' ';
    for (let i = 0; i < handleValues.length; i++) {
        let color = i + 1 < rangeColors.length ? rangeColors[i + 1] : rangeColors[0];
        gradient += handleValues[i] + '%, ' + color + ' ' + handleValues[i] + '% ';
    }
    gradient += "100%)";
    
    $('.ui-slider').css('background', gradient);
}