Verwenden Slider zum Ändern von Bild CSS-Filter mit Javascript

Question

Ich versuche, den CSS-Filter (hue-rotieren, um genau zu sein) auf einem PNG mit einem Schieberegler-Eingang. Ich bekomme immer "-Webkit-Filter: hue-rotate (undefined deg)"

Vielen Dank für Ihre Hilfe!

Hier ist mein Code:

function hueFunction(hueVal) { 
 
    var setAs = hueVal + "deg" 
 
    document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")") 
 
}

<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.hueVal)"> 
 

 
<br/> 
 

 
<img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">

Answer 1

ändern oninput="hueFunction(this.hueVal)" zu oninput="hueFunction(this.value)"

function hueFunction(hueVal) { 
 
    var setAs = hueVal + "deg" 
 
    document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")") 
 
}

<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.value)"> 
 

 
<br/> 
 

 
<img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">