Как заставить текст диапазона слайдера реагировать на входное значение слайдера

Question

У меня есть ползунок, где я хочу, чтобы диапазон отображался рядом с ним. Возможно, это было исправлено ранее, но я действительно не смог найти ни одного поста, описывающего эту проблему, поэтому извините, если пропустил несколько постов ...

Слайдер HTML

<div class="slidecontainer">
    <p>Radius</p>
    <p class="range">50 meter</p>
    <input type="range" min="1" max="100" value="0" class="slider" id="myRange">
    </div>

Что у меня есть для Javascript пока

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}

</script>

<script>
var rangevalue = ?
jQuery('.range').html(?);

</script>

Answer 1

В вашем html нет элемента с демо id. Если вы хотите отобразить текущее значение slider в элементе .range, присвойте значение ползунка textContent элемента .range.

const slider = document.getElementById("myRange");
const output = document.querySelector(".range");
output.textContent = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.textContent = this.value;
}

<div class="slidecontainer">
  <p>Radius</p>
  <p class="range">50 meter</p>
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <div id="demo"></div>
</div>