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%);
}

为范围滑块中的轨道上色

2 个答案: