如何在范围 div 上设置点？

Question

我在我的 asp.net MVC 项目中有一个范围div，其中最左边的点和最右边的点分别包含最大值和最小值，例如（max=400 和 min=0）。我想在给定范围的 div 上设置点。

例如：当我将点值设置为 399 时，我的 div 如下图所示。

如何在div 范围内设置点？

注意：我不需要 HTML 滑块，我的观点是固定的，不需要更改 UI。值应该写在点下面。

Answer 1

类似的东西

   $('.scoreContainer').find('.score').each(function() {
      var high = $(this).attr('data-high'),
        low = $(this).attr('data-low'),
        score = $(this).attr('data-score');
      var position = ((score - low) / (high - low)) * 100

      $(this).find('.arrow').css('right', position + "%");
      $(this).find('.arrow').html('<span>' + score + '</span>');
    });

    .scoreContainer {
  background: #ff3232;
  background: -moz-linear-gradient(left, #ff3232 0%, #ffff30 50%, #95ef81 100%);
  background: -webkit-linear-gradient(left, #ff3232 0%, #ffff30 50%, #95ef81 100%);
  background: linear-gradient(to right, #ff3232 0%, #ffff30 50%, #95ef81 100%);
  width: 400px;
  height: 20px;
  position: relative;
  margin-bottom: 25px;
  display: flex;
}
.score{
   width: 33.33%;
   height: 100%;
   position: relative;
}

.arrow {
  position: absolute;
  right: calc(100% - 5px);
  top: 100%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

.arrow span {
  font-size: 10px;
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="scoreContainer">
   <div class="green score" data-high="600" data-low="400" data-score="475">
        <div class="arrow"></div>
    </div>
    <div class="yelow score" data-high="399" data-low="200" data-score="201">
        <div class="arrow"></div>
    </div>
     <div class="red score" data-high="199" data-low="0" data-score="99">
        <div class="arrow"></div>
    </div>
    
 </div>