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

Question

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

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

类似这样的：

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

但是，我怎样才能设置另外两种不同的颜色（一种用于句柄的前一部分，另一种用于句柄的下一部分，如第一个屏幕截图）？有什么方法可以通过 jQuery 添加两个不同的类并设置这些类的样式：

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

？到目前为止，my result at fiddle

Answer 1

如果您正在寻找 JS 解决方案，this is how I approached the problem，使用“幻灯片”事件。

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 为例。

你还需要用overflow:hidden将滑块包裹在一个新的div中，这样它会切断左右两边的绿线和黄线。

Answer 3

你可以通过使用jQueryUI的4custom theming在.ui-slider的背景上应用一个三色条纹linear-gradient()来实现这个效果，并设置@987654331的背景@ 到 transparent。

那么您只需要一些代码（或者可能是一些花哨的 css？）来更新渐变的 multiple stop-points 以匹配滑块的选定值。

控件基本上是3层：

• 顶部是把手。 （也可以是customized。）
• 中间是两个手柄之间的背景。 (.ui-slider-range)
• 底部是背景。 (.ui-slider)

demo sn-p（下）的结果是这样的：

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>