范围滑块中轨道的颜色部分

Question

我有一个范围滑块，我希望能够为轨道的一部分着色，而不管滑块在哪里。例如，如果滑块位于 1-100 范围轨道上的第 26 个标记上，我想为轨道的 50-60 部分着色。是否可以？

类似：

注意：我要上色的部分（50-60）是一个计算值。代码在CodePen：

var min_slider = document.getElementById("min-slider");
var min_output = document.getElementById("min-output");
min_output.innerHTML = min_slider.value;

min_slider.oninput = function() {
  min_output.innerHTML = min_slider.value;
}

.slidecontainer {
  width: 100%;
  height: 50px;
  margin: 0;
  position: relative;
  pointer-events: none;
}

.slider1 {
  width: 100%;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 50px;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  pointer-events: none;
  opacity: 1;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 5px;
  margin: 0;
  padding: 0;
  background: #d3d3d3;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  outline: none;
}

.slider::-webkit-slider-runnable-track {
  cursor: default;
  outline: 0;
  -webkit-appearance: none;
}

.slider::-moz-range-track {
  cursor: default;
  -moz-appearance: none;
  outline: 0;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1BA94C;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  -moz-appearance: none;
  pointer-events: auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1BA94C;
  cursor: pointer;
}

<h1>Range Slider</h1>

<div class="slidecontainer">
  <div class="slider1">
    <input type="range" min="1" max="100" value="25" class="slider" id="min-slider">
  </div>
  <br/>
  <p>Value: <span id="min-output"></span></p>
</div>

Answer 1

您的算法并不完全清楚，但我认为我为实验设定了正确的方向。您可以使用linear-gradient() 填充线段。使用 CSS 变量 控制脚本中段的位置和大小：

var min_slider = document.getElementById("min-slider");
var min_output = document.getElementById("min-output");
min_output.innerHTML = min_slider.value;

min_slider.oninput = function() {
  min_output.innerHTML = min_slider.value;
  
  /* Controlling the position of a segment */
  min_slider.style.setProperty('--color_pos-start', parseInt(min_slider.value) / 2);
  min_slider.style.setProperty('--color_pos-end', parseInt(min_slider.value) / 2 + 10);
};

.slidecontainer {
  width: 100%;
  height: 50px;
  margin: 0;
  position: relative;
  pointer-events: none;
}

.slider1 {
  width: 100%;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 50px;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  pointer-events: none;
  opacity: 1;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 5px;
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  outline: none;
  background-color: #d3d3d3;
  
  /* Variables and gradient for segment */
  --color_pos-start: 12.5;
  --color_pos-end: 22.5;
  background-image: linear-gradient(90deg, 
    transparent calc(var(--color_pos-start, 12.5) * 1% - 1px), 
    #3d00b8 calc(var(--color_pos-start, 12.5) * 1%), 
    #ff9800 calc(var(--color_pos-end, 22.5) * 1%), 
    transparent calc(var(--color_pos-end, 22.5) * 1% + 1px));
}

.slider::-webkit-slider-runnable-track {
  cursor: default;
  outline: 0;
  -webkit-appearance: none;
}

.slider::-moz-range-track {
  cursor: default;
  -moz-appearance: none;
  outline: 0;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1ba94c;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  -moz-appearance: none;
  pointer-events: auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1ba94c;
  cursor: pointer;
}

<h1>Range Slider</h1>

<div class="slidecontainer">
  <div class="slider1">
    <input type="range" min="1" max="100" value="25" class="slider" id="min-slider">
  </div>
  <br />
  <p>Value: <span id="min-output"></span></p>
</div>

Answer 2

我让它工作了。这就是我想要的：

.slider{
    background: linear-gradient(90deg, grey 0%, grey 50%, red 50%, red 60%, grey 60%, grey 100%);
}