如何改造Progress Bar以显示数值及可接受范围标记？

需求说明 #

基于基础HTML/CSS进度条，添加可接受范围可视化标记（示例数值范围为[-50;50]，可接受范围为[-25;25]），实现类似带红色可接受区域的效果。

方案1：背景色块标记可接受范围 #

用红色背景块直观展示可接受区间，进度条覆盖在上方。

修改后的HTML代码

<div id="progressbar">
  <div class="acceptable-range"></div>
  <div class="progress-fill"></div>
</div>

修改后的CSS代码

#progressbar {
  background-color: black;
  border-radius: 13px;
  padding: 3px;
  position: relative; /* 为内部绝对定位元素提供基准 */
  height: 20px; /* 统一容器高度 */
}

/* 可接受范围红色背景 */
#progressbar .acceptable-range {
  position: absolute;
  top: 3px; /* 与容器padding保持一致，对齐进度条 */
  left: 25%; /* 对应数值-25的位置：(-25 - (-50))/100*100% = 25% */
  width: 50%; /* 对应[-25,25]的宽度：(25 - (-25))/100*100% = 50% */
  height: 20px;
  background-color: #ff4444;
  border-radius: 10px;
  z-index: 1; /* 放在进度条下方 */
}

/* 进度条填充层 */
#progressbar .progress-fill {
  background-color: orange;
  width: 40%; /* 示例值，对应数值-10：-50 + 40 = -10 */
  height: 20px;
  border-radius: 10px;
  position: relative;
  z-index: 2; /* 放在可接受范围上方，保证进度可见 */
}

方案2：竖线标记可接受范围边界 #

如果只需要标记可接受范围的左右边界，用竖线更简洁。

修改后的HTML代码

<div id="progressbar">
  <div class="mark left-mark"></div>
  <div class="mark right-mark"></div>
  <div class="progress-fill"></div>
</div>

修改后的CSS代码

#progressbar {
  background-color: black;
  border-radius: 13px;
  padding: 3px;
  position: relative;
  height: 20px;
}

/* 范围标记竖线 */
#progressbar .mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ff4444;
  z-index: 2; /* 放在进度条上方，确保标记可见 */
}

#progressbar .left-mark {
  left: 25%; /* 对应数值-25的位置 */
}

#progressbar .right-mark {
  left: 75%; /* 对应数值25的位置：(25 - (-50))/100*100% = 75% */
}

/* 进度条填充层 */
#progressbar .progress-fill {
  background-color: orange;
  width: 40%; /* 示例值，对应数值-10 */
  height: 20px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}

数值与进度条位置换算规则 #

总数值区间长度 = 最大值 - 最小值 = 50 - (-50) = 100，对应进度条100%宽度：

• 任意数值对应的进度条位置：(目标数值 - 最小值) / 总区间长度 * 100%
• 可接受范围宽度：(可接受最大值 - 可接受最小值) / 总区间长度 * 100%

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