如何通过range滑块实现图片grayscale灰度效果随滑动值动态调整

实现方案 #

1. 调整JavaScript逻辑 #

你只需要在现有的change函数里补充读取滑块值、给图片设置灰度滤镜的逻辑即可，filter属性的grayscale参数取值范围是0%-100%，刚好和你滑块的取值范围匹配：

function change() {
  const img = document.querySelector(".image");
  const slider = document.querySelector(".range");
  // 读取滑块当前值，拼接成grayscale的参数
  const grayValue = slider.value + '%';
  // 给图片设置滤镜
  img.style.filter = `grayscale(${grayValue})`;
}

2. 可选优化（实时响应拖动） #

你现在用的onchange事件只有在滑块拖动结束松开鼠标的时候才会触发效果，如果想要拖动过程中实时看到灰度变化，可以把HTML里的onchange改成oninput：

<input oninput="change()" type="range" class="range" min="1" max="100" value="1">
<img class="image" src="https://images.unsplash.com/photo-1499195333224-3ce974eecb47?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1248&q=80" alt="">

实现原理 #

• CSS的filter: grayscale()用于控制元素的灰度程度，值为0%时是原图，100%时是完全灰度的黑白图
• 滑块的value属性可以直接读取当前选中的数值，直接拼接成百分比单位传给grayscale即可匹配效果

内容的提问来源于stack exchange，提问作者Leena