Как реализовать шкалу с данными на сайте?

Question

Подскажите, может кто знает решение или как правильно искать(? Нужна шкала на сайте, на которой есть несколько цен, и есть цена определенного товара, на странице которого и располагается шкала. Эта цена товара должна быть обозначена, к примеру, вверху шкалы, в зависимости от данных на шкале (сравнение). Сумбурно объяснил, прикреплю лучше скриншот примера.

На данном скриншоте вверху это цена товара, на странице которого мы находимся, а на шкале - цены на аналогичные товары у других продавцов. Ну и идет как бы сравнение насколько выгодна наша цена.

Answer 1

Лично я для средних сайтов использую noUiSlider. https://refreshless.com/nouislider . Но для простых проектов можно это и самому написать.

Вот пример работы noUiSlider (вы всегда можете посмотреть какие классы использует noUiSlider и изменить их под свой вкус)

var rangeSlider = document.getElementById('slider-range');

noUiSlider.create(rangeSlider, {
    start: 4000,
    connect: [true,false], // делает поле перед ползунком синим
    tooltips:true, /// показывает значение сверху
    range: {
        'min': [2000],
        'max': [10000]
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.min.css" rel="stylesheet"/>
<br>
        <br>
        <div id="slider-range"></div>

Answer 2

Осмелюсь предположить что сам background-color вывести можно и в css но я вывел через javascript

Вывести подсказку можно и обычным parent: hover element (что как раз у меня в ответе)

Ну а дальше обычный декор родитель: наведение => смотрим пример

document.querySelectorAll(".item").forEach(function(item) {
  item.style.backgroundColor = item.dataset.color;
});

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  padding-top: 70px;
}

.items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 2px;
  padding: 0 10px;
}

.items:hover .item {
  opacity: 0.3;
}

.item:hover {
  opacity: 1 !important;
  transform: scale(1.1);
  z-index: 10;
  cursor: pointer;
}

.item {
  height: 20px;
  position: relative;
}

.item-description {
  width: 100%;
  transform: translate(0, 22px);
  padding: 4px;
  background: #ccc;
}

.item-description p:first-child,
.hint p:last-child {
  color: green;
}

.item-description p {
  max-width: 100%;
  font-family: "Roboto", sans-serif;
  font-size: 0.5vw;
  white-space: nowrap;
  text-align: center;
}

.hint {
  width: 100%;
  position: absolute;
  top: -60px;
  font-size: 0.5vw;
  text-align: center;
  border: 1px solid;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: 0.1s ease;
}

.hint:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 30px;
  background-color: #000;
}

.item:hover .hint {
  opacity: 1;
  visibility: visible;
}

<div class="parent">
  <div class="items">
    <div class="item" data-color="#287D0E">
      <div class="hint">
        <p>Dieses Fahrzeug</p>
        <p>10.999 €</p>
      </div>
      <div class="item-description">
        <p>Sehr guter Preis</p>
        <p>8.600 € -10.500 € 10.501-11.100 €</p>
      </div>
    </div>
    <div class="item" data-color="#52A11A">
      <div class="hint">
        <p>Dieses Fahrzeug</p>
        <p>10.999 €</p>
      </div>
      <div class="item-description">
        <p>Guter Preis</p>
        <p>11.101-12.400 €</p>
      </div>
    </div>
    <div class="item" data-color="#80BD23">
      <div class="hint">
        <p>Dieses Fahrzeug</p>
        <p>10.999 €</p>
      </div>
      <div class="item-description">
        <p>Fairer Preis</p>
        <p>12.401-14.000 €</p>
      </div>
    </div>
    <div class="item" data-color="#DEA506">
      <div class="hint">
        <p>Dieses Fahrzeug</p>
        <p>10.999 €</p>
      </div>
      <div class="item-description">
        <p>Erhohters Priels</p>
        <p>12.401-14.000 €</p>
      </div>
    </div>
    <div class="item" data-color="#E7882C">
      <div class="hint">
        <p>Dieses Fahrzeug</p>
        <p>10.999 €</p>
      </div>
      <div class="item-description">
        <p>Hoher Preis </p>
        <p>14.001-14.700 €</p>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как реализовать шкалу с данными на сайте?

Ответы (2 шт):