Come aggiungere un filtro immagine in base al valore di input dell’intervallo?

Ho un range input che serve per catturare la percentuale del filtro seppia su un’immagine visualizzata. Ho il codice html per l’input stesso e alcune righe un javascript che hanno lo scopo di cambiare il filtro dell’immagine. Tuttavia, il javascript non funziona. Eccolo, qualche idea ?: HTML:

 Sepia (0)
Grayscale (0)

CSS:

 .wrap img { position:relative; z-index:1; margin: none; top:0%; bottom:0%; vertical-align: bottom; -webkit-filter: none; } 

JS:

 function set(e){ document.getElementById('img_prev').style["webkitFilter"] = "sepia("+e.value+")"; document.getElementById('Amount').innerHTML="("+e.value+")"; } function set(e){ document.getElementById('img_prev').style["webkitFilter"] = "grayscale("+e.value+")"; document.getElementById('Amount2').innerHTML="("+e.value+")"; } 

Poiché utilizzi solo il webkit filter lo visualizzerò solo nella demo, ma puoi aggiungere msFilter webkitFilter mozFilter oFilter per altri browser.

Dovresti scegliere come target l’ID immagine, non l’ID contenitore con l’ID immagine.

 function set(e){ // Target the image ID (img_prev) (Filter) document.getElementById('img_prev').style["webkitFilter"] = "sepia("+e.value+")"; document.getElementById('Amount').innerHTML="("+e.value+")"; } 
  Sepia (0)