如何为seiyria-bootstrap-slider实现多色选中区域？

当然可以做到！默认的bootstrap-slider组件只支持单一颜色的选中区域，但我们可以通过自定义CSS结合JavaScript动态计算区间位置来实现多色分段的效果，下面是完整的实现方案：

实现思路 #

• 先定义好需要的颜色与对应的数值区间
• 利用滑块的slide和slideStop事件，实时根据当前滑块值计算各区间的占比
• 通过CSS线性渐变（linear-gradient）动态渲染多色的选中区域（替换默认的单一选中样式）

完整实现代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.js"></script>

<div style="text-align:center">
  <br>
  <div>
    <hr />
    <input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />&nbsp;&nbsp;&nbsp;&nbsp;
    <span id="ex11CurrentSliderValLabel">Value: <span id="ex11SliderVal">10</span></span>
    <hr />
  </div>
</div>

<style>
/* 隐藏默认的单一选中区域，改用track的渐变背景 */
#ex11Slider .slider-selection {
  display: none;
}

#ex11Slider .slider-handle {
  background: red;
}
</style>

<script>
var minSliderValue = $("#ex11").data("slider-min");
var maxSliderValue = $("#ex11").data("slider-max");

// 定义颜色区间：min、max对应数值范围，color对应区间颜色
const colorRanges = [
  { min: 0, max: 30, color: '#28a745' }, // 绿色区间
  { min: 30, max: 70, color: '#ffc107' }, // 黄色区间
  { min: 70, max: 100, color: '#dc3545' } // 红色区间
];

// 更新多色选中区域的函数
function updateMultiColorSelection(sliderElement, currentValue) {
  const sliderTrack = $(sliderElement).closest('.slider').find('.slider-track');
  const trackTotalWidth = sliderTrack.width();
  const valueRange = maxSliderValue - minSliderValue;
  
  // 构建线性渐变的颜色断点
  let gradientSegments = [];
  colorRanges.forEach(range => {
    // 计算当前区间在轨道上的起始和结束百分比
    const startPercent = ((range.min - minSliderValue) / valueRange) * 100;
    // 结束百分比不超过当前滑块值的位置
    const endPercent = ((Math.min(range.max, currentValue) - minSliderValue) / valueRange) * 100;
    
    if (endPercent > startPercent) {
      gradientSegments.push(`${range.color} ${startPercent}% ${endPercent}%`);
    }
  });
  
  // 添加未选中部分的灰色背景
  const currentValuePercent = ((currentValue - minSliderValue) / valueRange) * 100;
  gradientSegments.push(`#dee2e6 ${currentValuePercent}% 100%`);
  
  // 应用渐变背景到轨道
  sliderTrack.css('background', `linear-gradient(to right, ${gradientSegments.join(', ')})`);
}

$('#ex11').slider({
  ticks: [1, 2, 3, 5, 10, 25, 50, 100],
  ticks_positions: [0, 10, 20, 35, 50, 65, 82.5, 100],
  ticks_labels: ["1x", "2x", "3x", "5x", "10x", "25x", "50x", "100x"],
  ticks_snap_bounds: 1,
  ticks_tooltip: true,
  step: 1,
  max: 100,
  tooltip: 'always',
  value: 10,
  formatter: function (value) {
    return value + 'x';
  },
}).on('slide slideStop', function(slideEvt) {
  $("#ex11SliderVal").text(slideEvt.value);
  // 滑块移动时更新多色区域
  updateMultiColorSelection(this, slideEvt.value);
});

// 初始化页面时设置一次多色区域
updateMultiColorSelection('#ex11', $('#ex11').slider('getValue'));

// 输入框联动逻辑保持不变
$("#input-value").on("keyup", function () {
  var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
  this.value = val > maxSliderValue ? maxSliderValue : val;
  $('#ex11').slider('setValue', val);
});
</script>

关键说明 #

1. 颜色区间定义：你可以根据需求修改colorRanges数组，添加或调整区间的数值范围和颜色
2. 动态渐变计算：updateMultiColorSelection函数会根据当前滑块值，计算每个颜色区间在轨道上的占比，生成对应的线性渐变背景
3. 默认样式替换：我们隐藏了默认的.slider-selection元素，改用滑块轨道（.slider-track）的渐变背景来实现多色效果，这样不会破坏组件原有结构

内容的提问来源于stack exchange，提问作者Gian