javascript - How do I position the tooltip always at the same distance from the thumb in the range slider? - Stack Overflow

admin管理员组

文章数量:1431726

I have two range sliders, and I need to position the tooltip in them according to the screenshot.

I placed it, but when moving the slider, the tooltip does not stay at the same distance near it, but moves.

How to solve this problem?

Here is the code -

document.addEventListener('DOMContentLoaded', () => {
  const sliders = document.querySelectorAll('.calculator__slider-item');

  sliders.forEach((slider) => {
    const tooltip = slider.nextElementSibling; // Находим tooltip
    const valueDisplay = slider.parentElement.nextElementSibling; // Находим <span> для отображения значения

    function updateSlider() {
      const sliderRect = slider.getBoundingClientRect(); // Получаем размеры слайдера
      const thumbWidth = 20; // Фиксированная ширина thumb
      const min = parseInt(slider.min);
      const max = parseInt(slider.max);

      // Текущее значение
      const value = parseInt(slider.value);

      // Процентное положение слайдера
      const percent = (value - min) / (max - min);

      // Абсолютная позиция thumb в пикселях
      const thumbPosition = percent * sliderRect.width;

      // Позиционируем tooltip строго по thumb
      tooltip.style.left = `${thumbPosition - tooltip.offsetWidth / 2 + thumbWidth / 2}px`;
      tooltip.textContent = value;

      // Обновляем отображение значения
      valueDisplay.textContent = value;
    }

    // Инициализация
    updateSlider();

    // Обновление при взаимодействии
    slider.addEventListener('input', updateSlider);
  });
});

.slider-group {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 500px;
  flex-direction: column;
}

.calculator__slider-wrapper {
  position: relative;
}

.calculator__tooltip {
  color: red;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateY(-50%);
}

.calculator__slider-item {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-appearance: none;
  min-height: 40px;
  border-radius: 8px;
  overflow: hidden;
  padding: 0 10px 0 20px;
}

.calculator__slider-item::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 40px;
  background: #fff;
  border: 4px solid #26bb01;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: -410px 0 0 400px #26bb01;
}

<div class="calculator__item slider-group">
  <div class="calculator__slider">
    <label for="hours">Часов в день</label>
    <div class="calculator__slider-wrapper">
      <input type="range" id="hours" min="2" max="12" value="8" class="calculator__slider-item" />
      <div class="calculator__tooltip"></div>
    </div>
    <span class="calculator__slider-value" id="hours-value">8</span>
  </div>
  <div class="calculator__slider">
    <label for="days">Дней в месяц</label>
    <div class="calculator__slider-wrapper">
      <input type="range" id="days" min="3" max="31" value="20" class="calculator__slider-item" />
      <div class="calculator__tooltip"></div>
    </div>
    <span class="calculator__slider-value" id="days-value">20</span>
  </div>
</div>

本文标签：