如何在水平线上动态定位最小值、最大值与中间值？

• 我会动态获取三个数值：最小值（min）、最大值（max）以及一个中间值
• 不知道该如何确定中间值的位置并完成这类布局设计
• 只找到NoUiSlider这类滑块组件，但我不需要滑块功能
• 目前用div实现了类似效果，但总觉得不够合适，希望能得到相关提示

附：我知道图中的刻度点（pips）并非完全准确

编辑1 #

我参考他人的回答得到了一个解决方案：

CSS代码 #

.container {
  position: relative;
  max-width: 400px;
  overflow: hidden;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
}

input[type="range"]:focus {
  outline: none;
}
  
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  cursor: pointer;
  border: 1px solid black;
  overflow: hidden;
}

input[type="range"]::-webkit-slider-thumb {
  height: 0px;
  width: 15px;
  cursor: pointer;
  -webkit-appearance: none;
}

datalist {
  display: flex;
  justify-content: space-between;
}

datalist option {
  position: relative;
  background: transparent;
  top: 25px;
  border-left: 0px solid transparent;
  border-right: 1px solid black;
  min-height: 2px;
}

datalist option:first-of-type {
  border-left: 0;
}

datalist option:last-of-type {
  border-right: 0;
  border-left: 1px solid black;
}

HTML代码 #

<div class="container">

  <div class="range-2">
    <datalist id="custom-list-2">
      <option value="1" style="background: #fff;">4</option>
      <option value="2"></option>
      <option value="3" style="background: #f07d00;
    color: #fff;border:none;padding:2px;">5</option>
      <option value="4"></option>
      <option value="5" style="background: #fff;">5</option>
    </datalist>
    <input type="range" min="1" max="10" step="1" list="custom-list-2"></input>
  </div>
</div>

我会在其他程序中确定给定中间值的左、中、右位置，这种展示方式已经足够好了。

另外，对于那些要求我提供更多信息的人：正如我所说，我完全不知道该如何着手才来这里提问，但社区对知识储备较少的人越来越不友好。

编辑2 #

我完成了另一个版本，效果完全符合需求。

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