J.S + CSS help: How to set .style.filter = somefilter () to input.value

Question

I'm working on a picture editor, and
I need the image's grayscale to be input.value (the input type is range).

If range (input).value is 0%, the image grayscale is 0%,
,if range(input).value is 90%, the image grayscale is 90%...etc.

Here's code:
https://code.sololearn.com/Wep8Iw2ZgCiF/?ref=app

Answer 1

Rather than just setting the value of the filter of the image to grayscale() when using the slider, you could instead set it to grayscale(gs.value); to be directly affected by the input (this could just be done by splitting the string in 2 and adding gs.value in between it, so something like "grayscale(" + gs.value + ");). Additionally, because the grayscale function only works based on a value from 0 - 1, you could divide gs.value by 100 to be able to allow for it to have a greater impact on the image

Answer 2

It's as simple as gs.value/100 d:

Answer 3

Faisal , i don't understand deviding gs.value by 100.
how do you do that?

Answer 4

I have made a similar project. You can take a look here:

https://code.sololearn.com/Wx3rh9mnQ2NH/?ref=app