Javascript 如何使用按钮更改HTML范围滑块值？

我正在使用HTML范围滑块放大和缩小图像。我还想显示两个按钮与滑块一样+缩放和− 用于缩小。当用户单击其中一个按钮时，滑块也应移动。但我无法做到这一点。这是我的密码

<div id="slider">
    <input id="slide" type="range" min="330" max="1200" step="30" value="330" onchange="ImageViewer.sliderAction(this.value)" />
</div>

单击按钮时，我尝试了以下操作：

btnZoomIn.click(function() {
    $("#slide").value();  //Want to change value but value is undefined.
});

是否有任何方法可以更改滑块值并在单击按钮时将其移动？

使用

val（）

btnZoomIn.单击（函数（）{
//如果值<最大值
$（“#幻灯片”）.val（parseInt（$（“#幻灯片”）.val（））+30）；
$（“#幻灯片”）.trigger（'change'）；
});

---

您可以使用

.val（）

的回调函数，然后触发onchange事件：

var sliderelement = $( "#slide" );
btnZoomIn.click(function() {
 sliderelement.val(function( index, value ) {
     return parseInt(value,10) + 30;
 });
 sliderelement[0].onchange()
});

---

.val（）值为Null关于

attr（'value'）

？与上述情况相同。值已更改，但滑块已移动到其最大值value@Umer：你能用小提琴重现这个问题并分享链接吗？我在上面的@madalin-answer@Umer:ahh评论中得到了我的答案。解析问题。我想.val以int格式返回range的值。您是对的，但有一点错误$（“#幻灯片”）.val（）不返回整数值。它返回双引号，如“450”，加上30后，它变成45030，滑块转到最大值。我这样做了，现在效果很好。parseInt（$（“#幻灯片”）.val（））+30。现在很好用。

 btnZoomIn.click(function() {
               //if value < max
               $("#slide").val(parseInt($("#slide").val())+30);  
               $("#slide").trigger('change');
            });

var sliderelement = $( "#slide" );
btnZoomIn.click(function() {
 sliderelement.val(function( index, value ) {
     return parseInt(value,10) + 30;
 });
 sliderelement[0].onchange()
});