Este fragmento de código cambia el brillo y el contraste de una imagen. Sin embargo, al configurar el contraste al 150 %, por ejemplo, y luego intentar cambiar el brillo, el valor predeterminado del contraste vuelve al 100 %. ¿Cómo puedo evitar que estos atributos de estilo vuelvan a cambiar a su valor predeterminado después de cambiarlos?
<p> Contrast Bar </p> <input id='contrast_bar' type="range" min="50" max="150" value="100"> <p> Brightness Bar </p> <input id='brightness_bar' type="range" min="50" max="150" value="100"> <BR><BR> <img id='img_selection' src="photo.jpg"> <script> let contrast_bar = document.querySelector('[id=contrast_bar]') let brightness_bar = document.querySelector('[id=brightness_bar]') let img = document.querySelector('#img_selection') contrast_bar.addEventListener('input', con_bar => { img.style.filter = 'contrast(' + con_bar.target.value + '%)' }) brightness_bar.addEventListener('input', bright_bar => { img.style.filter = 'brightness(' + bright_bar.target.value + '%)' }) </script>El problema es que sobrescribe la configuración anterior del filter cuando cambia cada control deslizante de rango, por lo tanto, solo se actualiza un tipo de filtro.
Para solucionar el problema, cree una función que lea los valores de ambas entradas de rango y cree una sola cadena con valores de brillo y contraste, y llame a esta función cada vez que se cambie cualquiera de los rangos.
let contrast_bar = document.querySelector('#contrast_bar'); let brightness_bar = document.querySelector('#brightness_bar'); let img = document.querySelector('#img_selection'); let updateFilter = () => img.style.filter = `contrast(${contrast_bar.value}%) brightness(${brightness_bar.value}%)`; contrast_bar.addEventListener('input', updateFilter); brightness_bar.addEventListener('input', updateFilter); img { width: 300px; } <p>Contrast Bar</p> <input id="contrast_bar" type="range" min="50" max="150" value="100" /> <p>Brightness Bar</p> <input id="brightness_bar" type="range" min="50" max="150" value="100" /><br /><br /> <img id="img_selection" src="https://i.imgur.com/WkomVeG.jpg" />