HTML Range element value not updating with Angular6 function

Question

I am trying to get access to the changing values of a series of HTML range sliders.

Here is how they're instantiated:

<li *ngFor="let rgbVal of rgbVals; let i=index">
            {{i}}: {{rgbVal}} <br>
            <div class="color-box" [style.backgroundColor]="rgbVal"></div>
            <div class="slideContainer" >
                <input type="range" min="1" max="100" value="30"  class="slider" id="shade{{i}}" step="1" (change) = "update(i)"  >

            </div>


        </li>

This is the Typescript function I have in my .ts function that should be able to access the value of the sliders:

update(i){
var id = "shade"+i;
var slider = document.getElementById(id);
console.log(slider.getAttribute("value"));}

The value once I move the slider stays constant & unchanged, no matter which slider I move or how much I move it.

Interestingly enough, if I run this code:

 update(i){
var sliders = document.getElementsByClassName("slider");
console.log(sliders);}

And then in the console open up the HTML container and look at the value field of each slider, it is updated as I move it.

I also tried

slider = sliders[i];
console.log(slider.getAttribute("value");

And that stayed constant regardless of change, even though that slider when viewed as a part of the sliders object allowed the value to be updated.

I am baffled by this one and can't find any similar errors online, so any help would be greatly appreciated.

Simon K · Accepted Answer · 2018-08-15 22:25:04Z

1

You problem is that slider.getAttribute("value") reads the value of the attribute, not the value of the input, so it will always say 30.

What you need is:

update(i: number) {
    const id = `shade${i}`;
    const slider = document.getElementById(id) as HTMLInputElement;
    console.log(slider.value);
}

answered Aug 15, 2018 at 22:25

Simon K

2,8771 gold badge15 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

HTML Range element value not updating with Angular6 function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related