基于Bootstrap实现带基准点的股票价格进度条及标记问题

我希望使用Bootstrap制作一款关联股票价格的进度条：进度条存在一个中间基准点（起始价格），以最低价格和最高价格作为进度条的两端；若价格低于起始价格则显示红色，高于起始价格则显示绿色，两种价格也可能同时高于或低于基准价。

参考示例图：

我已基于Bootstrap完成了部分实现，但需要通过大量计算来替换progress-bar的百分比值。

请问如何为进度条添加图中所示的两端箭头以及中间基准标记？

已实现的代码片段 #

CSS 样式 #

.progress-label.left {
  float: left;
  margin-right: 1em;
}

.progress-label.right {
  float: right;
  margin-left: 1em;
}

.price-change {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.price-change .left,
.price-change .right {
  flex: 0 0 3%;
  font-size: .75rem;
}

.price-change .left {
  text-align: left;
}

.price-change .progress {
  margin: 0.25rem;
  flex-grow: 8;
  border-radius: 0;
}

HTML 结构 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
  <body>
  <div class="main-content">
      <div class="page-content">
        <div class="container-fluid">
    <div class="row mt-4">
    <div class="price-change mb-3">
      <span class="text-muted right ms-2">210500</span>
      <div class="progress" style="height:6px;">
        <div class="progress-bar bg-transparent" role="progressbar" style="width: 20%"></div>
        <div class="progress-bar bg-success" role="progressbar" style="width: 80%"></div>
        <div class="progress-bar bg-transparent" role="progressbar" style="width: 0%">
        </div>
        <div class="progress-bar bg-danger" role="progressbar" style="width: 20%"></div>
        <div class="progress-bar bg-transparent" role="progressbar" style="width: 80%">
        </div>
      </div>
      <span class="text-muted left me-2">210000</span>
    </div>
    </div>
    </div>
    </div>
    </div>
    
  </body>

</html>

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