CODEWITHSUNDEEP
javascript
Aidan Chui
Aidan Chui

Reputation: 35

How do I make my range slider work for both numbers and colors?

Right now I have this code where part 1(for changing the range slider numbers) only works once, and part 2(for changing the colour) works. However, when I remove part 2, part 1 works fine. Can anyone help me?

function sliderChange()
{ 
    var sliderVal = document.getElementById("speed").value+"%";    
    document.getElementById("sliderVal").innerHTML = sliderVal; //Part 1

    document.getElementById("speed").oninput = function() {
    this.style.background = 'linear-gradient(to right, #85C1E9 0%, #85C1E9 ' + (this.value-50) + '%, #fff ' + (this.value-50) + '%, white 100%)'
    }; //Part 2
}

Upvotes: 0

Views: 77

Answers (3)

Aidan Chui
Aidan Chui

Reputation: 35

Solved Add onmousemove="sliderChange()" to html(including onChange)

Upvotes: 0

Ethan
Ethan

Reputation: 61

The oninput property stores a single function that gets called whenever the value of your range slider changes.

So, assuming you are doing something like this in your HTML:

<input type="range" min="1" max="100" value="50" class="slider" id="speed" oninput="sliderChange()">

That will tell your slider to run the "sliderChange" function whenever it receives input, as you already know.

However, your "part 2" will actually take whatever function that gets run "oninput" and overwrite it:

document.getElementById("speed").oninput = function() { ...

So, your part 2 is actually saying, "hey slider, whatever function you're running when you receive input? That sliderChange function? That should actually be replaced entirely with this new function that changes the background color".

This means no longer will the slider fire off the "sliderChange" function. Instead, it will fire off the anonymous function (everything between "function(){" and "}") that changes the background.

You can fix this just by removing the anonymous function, and updating the background changing code to work directly on the slider element:

function sliderChange() {
    var sliderVal = document.getElementById("speed").value;    
    document.getElementById("sliderVal").innerHTML = sliderVal + "%"; //Part 1

    document.getElementById("speed").style.background = 'linear-gradient(to right, #85C1E9 0%, #85C1E9 ' + (sliderVal-50) + '%, #fff ' + (sliderVal-50) + '%, white 100%)';
}

That way, the same "sliderChange" function fires off every time the slider receives input, rather than having its input function change after the first time its run.

That said, as others have mentioned, styling a normal "out of the box" slider may not work the way you hope, depending on the browser and the slider HTML you're actually using. Good luck!

Upvotes: 1

Ryuno-Ki
Ryuno-Ki

Reputation: 800

document.getElementById("speed").oninput registers an Event Listener for input events on an element with ID speed (you haven't shared HTML, so I can't tell which one. Likely the slider). If this element never fires an input event, the assigned function won't be executed.

If I update it like so:

function sliderChange()
{ 
  var el = document.getElementById("speed");
  var sliderVal = el.value + "%";    
  document.getElementById("sliderVal").innerHTML = sliderVal; //Part 1

  el.style.background = 'linear-gradient(to right, #85C1E9 0%, #85C1E9 ' + (this.value - 50) + '%, #fff ' + (this.value - 50) + '%, white 100%)'; //Part 2
}

document.getElementById("speed").addEventListener("change", sliderChange);
<input type="range" id="speed" />
<div id="sliderVal"></div>

you can see, that the code executes fine.

Except, that you don't see a background on the <input type="range" />. This is likely, because the browser don't allow styling like that. (Inspector tells me, that the attribute is applied nevertheless).

Upvotes: 0

Related Questions