CODEWITHSUNDEEP
javascripthtml
ms217
ms217

Reputation: 70

Using a range slider to continuously change an input value even when the mouse is still holding onto the slide

I'm trying to use my range slider to change the value or 'price' of another element's ID. The range slider is based on page views. I got the range slider to do that, but only after a drag and let go. I am hoping to get it to dynamically change, so the price changes even before I let go of the mouse. Here is what I have so far:

HTML:

          <div id="slide-container">
            <input
                type="range"
                min="5"
                max="200"
                step="5"
                value="100"
                class="slider"
                id="myRange"
            />
        </div>

JavaScript:

 const slider = document.getElementById("myRange");
 function updateSlider() {
     pageViews = document.getElementById("views");
     pageViews.innerHTML = slider.value;
     updatePrice();
 }

 slider.addEventListener("change", updateSlider);

Is there a better way to do this so the function updatePrice runs even when I have the mouse clicked?

Upvotes: 2

Views: 2005

Answers (1)

Oskar Grosser
Oskar Grosser

Reputation: 3434

oninput seems to be exactly what you need.

Quick example:

document.querySelector('input')
    .addEventListener('input', evt => {
  console.log(evt.target.value)
});
<input type="range">

Upvotes: 4

Related Questions