I created an input range (0-100) then trying to assign the output value to the image filter(grayscale)

<img src="myimg.jpeg " id="inserted" draggable="true" >

select(".slider").mouseClicked(function(){self.test=self.olId[0].value;
         document.getElementById("inserted").style.filter="grayscale((self.test)%)";
        console.log(self.test);
        
    });

When I change (self.test) to any integer(30,40,...) it works also in console when I move the range the result of self.test change so why the change in self.test not reflected in my filter range --> self.test(ok segment) -->filter(broken segment) range change --> any integer --> filter all ok What do I miss here?