While dragging the input range, the brightness value (also a CSS property) updates but the image is not instantly affected in Safari. (It works well in Chrome)
How can the changes be applied to the image while dragging?
var app = Vue.createApp({
data() {
return {
brightness: 1
}
},
computed:{
imgStyle(){
return {
'-webkit-filter': `brightness(${this.brightness})`
}
}
}
});
var vm = app.mount("#app");
<div id="app">
<img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?" width="150"
:style="imgStyle">
<input type="range" min="0" max="2" step="0.1" v-model="brightness"/>
<span> {{brightness}} </span>
</div>