Run JS script when input range reaches certain value

Question

I have an input range slider on my page that displays several values. I want to change CSS values of the elements on the same page when the value changes. I am well aware of the onChange function but I was wondering if there was a way to run the function changeAtt when it reaches a specific value, e.g. 2.

HTML:

<div id="change"></div>
<input class="slider "type="range" min="0" max="3" value="0" step="1" onchange="showValue(this.value)" />
<span id="range">0</span>

CSS:

#change {
    color:black;
}

JS:

function showValue(newValue) {
    document.getElementById("range").innerHTML=newValue;
}
function changeAtt() {
    document.getElementById("change").style.color = "white";
}

Rajesh Dan · Accepted Answer · 2016-11-11 04:21:08Z

2

You can just call the changeAtt() function from showValue() if the value reaches a certain predefined amount.

function showValue(newValue) {
    document.getElementById("range").innerHTML=newValue;
    if(newValue === 2) {
        changeAtt();
    }
}
function changeAtt() {
    document.getElementById("change").style.color = "white";
}

edited Nov 11, 2016 at 4:21

user663031

answered Nov 11, 2016 at 4:14

Rajesh Dan

4677 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sagar · Accepted Answer · 2016-11-11 04:19:07Z

1

I think you will just have to check the value in onChange event and give the further call

function showValue(newValue) {
     if(newValue === '2') changeAtt()
     document.getElementById("range").innerHTML=newValue;
}
function changeAtt() {
    document.getElementById("change").style.color = "white";
}

answered Nov 11, 2016 at 4:19

Sagar

5383 silver badges9 bronze badges

Comments

Bruno Kos · Accepted Answer · 2018-03-03 13:45:27Z

0

How about using oninput Event like this and then applying to your solution:

function myFunction(val) {
  document.getElementById("demo").innerHTML = val;
  if (val <= 300) {
    document.getElementById("change").style.color = "red";
  } else if (val > 300) {
    document.getElementById("change").style.color = "blue";
  }
}

And then:

<div id="change"><p id="demo">50</p>
</div>
<input id="pricing" type="range" min="50" max="301" step="1" oninput="myFunction(this.value)">

edited Mar 3, 2018 at 13:45

answered Mar 3, 2018 at 13:29

Bruno Kos

6452 gold badges9 silver badges18 bronze badges

Collectives™ on Stack Overflow

Run JS script when input range reaches certain value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related