Javascript 如何使2个范围滑块调整1个图像？

html格式的两个滑块

<!--Saturation Slider-->
<input id="Hslide" type="range" min="0.0" max="2.0" value="1.0" step="0.01" oninput="showValue(value)" />

<!--Brightness Slider-->
<input id="Vslide" type="range" min="0" max="2" value="1" step="0.1" orient="vertical" oninput="showValue(value)" />

还有脚本

<script type="text/javascript">
function showValue(slideAmount)
{
    var pic = $('.effects').val();
    $('#pic').css('-webkit-filter', 'saturate('+slideAmount+')');
    $('#range').val(slideAmount);
    document.getElementById("Hslide").setAttribute("style","-webkit-filter:saturate(" + value + "%)");
}
function showValue(slideAmount1)
{
    var pic = $('effects').val();
    $('#pic').css('-webkit-filter', 'brightness('+slideAmount1+')');
    $('#range').val(slideAmount1);
    document.getElementById("Vslide").setAttribute("style","-webkit-filter:saturate(" + value + "%)");
}
</script>

函数showValue（slideAmount）
{
var pic=$（'.effects'）.val（）；
$（'#pic'）.css（'-webkit filter'，'saturate（'+slideAmount+'））；
$（'#range'）.val（slideAmount）；
document.getElementById（“Hslide”）.setAttribute（“style”，“-webkit过滤器：饱和（“+value+”）”）；
}
函数showValue（slideAmount1）
{
var pic=$（'effects'）.val（）；
$（'#pic'）.css（'-webkit filter'，'brightness（'+slideAmount1+'））；
$（'#range'）.val（slideAmount1）；
document.getElementById（“Vslide”）.setAttribute（“style”，“-webkit过滤器：饱和（“+value+”）”）；
}

---

问题是：每当我滑动并更改饱和度，然后更改亮度时，图像过滤器值会在应用我所做的第二个过滤器更改之前重置。是否有办法对图像应用两个过滤器？

首选jqueryui中的滑块。参考链接您不能有两个同名函数这是Haping，因为您正在保存第一个滑块所做的更改。有两种方法可以处理它，一种是在滑块1完成工作后保存图像，另一种是将滑块所做的更改存储在cookie或会话中，然后将其应用于更改滑块的事件