Как установить точку на диапазон div? - PullRequest
Новая
       8

Как установить точку на диапазон div?

0 голосов
/ 17 января 2019

У меня есть один диапазон div в моем проекте asp.net MVC, где крайняя левая точка и крайняя правая точка содержат значения max и min соответственно, например, (max = 400 и min = 0). Я хочу установить точку на div с заданным диапазоном.

Например: когда я устанавливаю 399 в качестве значения точки, мой div выглядит следующим образом.

example picture

Как установить точку в диапазоне div?

Примечание: мне не нужен HTML-слайдер, моя точка исправлена ​​и не требует изменения пользовательского интерфейса. Значение должно быть написано под точкой.

1 Ответ

0 голосов
/ 17 января 2019

как то так 

   $('.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>
...