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

How to change HTML range slider value with button?(如何使用按钮更改 HTML 范围滑块值?)

问题描述

我正在使用 HTML 范围滑块来放大和缩小图像.我还想显示两个带有滑块的按钮，例如 + 用于缩放和 −用于缩小.当用户点击这些按钮中的任何一个时，滑块也应该被移动.但我无法做到这一点.这是我的代码.

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.

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

这是我的功能:

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?

推荐答案

使用 val()

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

https://jsfiddle.net/9jfst447/

这篇关于如何使用按钮更改 HTML 范围滑块值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！