Блог

В настоящее время я пытаюсь выяснить, как переместить пузырь, который содержит текущее значение элемента input type =»range». Я имею в виду, что моя цель — когда я перемещаю большой палец ползунка, пузырь тоже будет перемещаться вместе с ним, поэтому пузырь всегда будет находиться над большим пальцем ползунка.

Я пытался найти это в Google, но все, что я могу найти, это то, как оформить этот div, чтобы он выглядел как bubble, и небольшой код для отображения его точно над большим пальцем слайдера, но у меня это не работает, и я не могу понять, как заставить его работать или как вычислить позицию, в которой он будет отображаться.

Код, который я нашел

 const
    range = document.getElementById('range'),
    rangeV = document.getElementById('rangeV'),
    setValue = ()=>{
        const
            newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
            newPosition = 10 - (newValue * 0.2);
        rangeV.innerHTML = `<span>${range.value}</span>`;
        rangeV.style.left = `calc(${newValue}%   (${newPosition}px))`;
    };
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
  

Я работаю в React, и результатом этого будет приложение BMI calculator.

Кто-нибудь сталкивался с проблемой такого типа? Я буду рад каждому совету или объяснению. Спасибо.

ссылка на codesandbox :https://codesandbox.io/s/suspicious-tereshkova-ujk45?file=/src/Components/Button.js

Хотя не рекомендуется использовать ванильный javascript для неконтролируемых компонентов в react. Смотрите React useRef. Но у вас уже есть решение. Все, что вам нужно сделать, это поместить этот фрагмент в хук useEffect() в Range.js .

В Range.js

 function Range(props) {

  useEffect(() => {
    const
    range = document.getElementById('range'),
    rangeV = document.getElementById('rangeV'),
    setValue = ()=>{
        const
            newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
            newPosition = 10 - (newValue * 0.2);
        rangeV.innerHTML = `<span>${range.value}</span>`;
        rangeV.style.left = `calc(${newValue}%   (${newPosition}px))`;
    };
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
  }, [])

...//rest of Range.js
  

Смотрите https://jsfiddle.net/7wmgspvq/3 /