javascript 如何使用按钮更改 HTML 范围滑块值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34309741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change HTML range slider value with button?
提问by umer
I am using a HTML range slider to zoom in and zoom out an image. I also want to show two buttons with slider like + for zoom and − for zoom out. When a user clicks on either of these buttons, the slider should also be moved. But I am unable to do this. Here is my code.
我正在使用 HTML 范围滑块来放大和缩小图像。我还想显示两个带有滑块的按钮，例如 + 用于缩放， - 用于缩小。当用户点击这些按钮中的任何一个时，滑块也应该被移动。但我无法做到这一点。这是我的代码。
<div id="slider">
<input id="slide" type="range" min="330" max="1200" step="30" value="330" onchange="ImageViewer.sliderAction(this.value)" />
</div>
Here is my function:
这是我的功能：
var sliderAction = function (value) {
$sliderChosen.html(value);
$("#img").width(value);
$("#img").height(value);
};
When I click the button, I tried this:
当我点击按钮时，我试过这个：
btnZoomIn.click(function() {
$("#slide").value(); //Want to change value but value is undefined.
});
Is there any way to change slider value and move it as well on button click?
有什么方法可以更改滑块值并在单击按钮时移动它？
回答by madalinivascu
use val()
利用 val()
btnZoomIn.click(function() {
//if value < max
$("#slide").val(parseInt($("#slide").val())+30);
$("#slide").trigger('change');
});
回答by Milind Anantwar
You can use callback function of .val()and then trigger onchange event:
您可以使用的回调函数.val()然后触发 onchange 事件：
var sliderelement = $( "#slide" );
btnZoomIn.click(function() {
sliderelement.val(function( index, value ) {
return parseInt(value,10) + 30;
});
sliderelement[0].onchange()
});
