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

Question

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>

问题：每当我滑动并更改饱和度然后更改亮度时，图像滤镜值会在应用我所做的第二次滤镜更改之前重置。如果有办法将两个滤镜应用于图像？