1

I have a range input that is meant to catch the percentage of sepia filter on a displayed image. I have the html for the range input itself, and a few lines a javascript that are meant to actually change the filter of the image. However, the javascript is not working. Here it is, any ideas?: HTML:

<input id="sepia" type="range" oninput="set(this);" value="0" step="0.1" min="0" max="1"> Sepia <span id="Amount">(0)</span><br/>


<input id="grayscale" type="range" oninput="set(this);" value="0" step="0.1" min="0" max="1"> Grayscale <span id="Amount2">(0)</span><br/>

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+")";
}
2
  • working on your problem!
    – AleshaOleg
    Jul 28, 2015 at 20:53
  • Not sure why someone would down vote so until someone posts a valid reason for the down vote I will up vote this.
    – NewToJS
    Jul 28, 2015 at 21:24

1 Answer 1

4

Since you're only using webkit filter I will only display that in the demo but you can add msFilter webkitFilter mozFilter oFilter for other browser support.

You should be targeting the image ID, not the container ID with the image ID.

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+")";
}
<input id="sepia" type="range" oninput="set(this);" value="0" step="0.1" min="0" max="1"> Sepia <span id="Amount">(0)</span><br/>
<img id="img_prev" src="https://i.stack.imgur.com/2lRQ9.png"/>

If you have any questions about the source code above please leave a comment below.

I hope this helps. Happy coding!

Update: New snippet Only one filter will apply.

function set(e, f){
//  Target the image ID (img_prev)          (Filter)
document.getElementById('img_prev').style["webkitFilter"] = f+"("+e.value+")";
document.getElementById('Amount_'+f).innerHTML="("+e.value+")";
}
<input id="sepia" type="range" oninput="set(this, 'sepia');" value="0" step="0.1" min="0" max="1"> Sepia <span id="Amount_sepia">(0)</span><br/>
<input id="grayscale" type="range" oninput="set(this, 'grayscale');" value="0" step="0.1" min="0" max="1"> Grayscale <span id="Amount_grayscale">(0)</span><br/>
<img id="img_prev" src="https://i.stack.imgur.com/2lRQ9.png"/>

6
  • @ScottMyers You are very welcome. If you don't understand any of the source code "not that it's much source code" just let me know and I will add more comments if needed.
    – NewToJS
    Jul 28, 2015 at 21:22
  • one more quick question... I added another function to change the grayscale filter and substituted variables where necessary, however now both sliders adjust grayscale, as apposed to grayscale and sepia. Any ideas? Otherwise thanks so much! Jul 28, 2015 at 21:32
  • @ScottMyers can you edit your original question so I can see the changes . I will try my best to get this working for you.
    – NewToJS
    Jul 28, 2015 at 21:33
  • Ah, I see. You have two functions with the same name. set() cannot be used more than once.
    – NewToJS
    Jul 28, 2015 at 21:41
  • Oops missed that. Clearly I'm new to this, Once again thanks so much for your help. Jul 28, 2015 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.