Lo que hace mi codigo es c ambiar el filtro de una imagen. Es decir, con un input type range (un slider) lo deslizo para cambiar los valores y modificar el filtro de la imagen.
Mi problema es que cuando cambio uno el otro no se aplica, es decir, es como que se elimina el valor anterior y se reescribe el style en el html.
Quiero algo como esto: https://webdevtrick.com/demos/css-filter-editor/
Mi codigo es:
JS:
function hueFunction(hueVal1) {
var setAs = hueVal1 + "deg"
document.getElementById("chasis").setAttribute("style", "filter:hue-rotate(" + setAs + ");")
}
function Iluminacion(hueVal2) {
var Ilumina = hueVal2 + "%"
document.getElementById("chasis").setAttribute("style", "filter:brightness(" + Ilumina + ")")
}
HTML INPUT:
<div>
Matiz
<input id="input-slide" type="range" data-default="0" value="0" min="0" max="2000" step="1" id="hue-rotate" oninput="hueFunction(this.value)">
</div>
<div>
Iluminacion
<input id="input-slide" type="range" data-default="0" value="0" min="0" max="500" step="1" id="iluminacion" oninput="Iluminacion(this.value)">
</div>
HTML IMAGE:
<img id="chasis" src="image/chasis/1.png" alt="" class="img-responsive"/>