Question

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

<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);
};

当我点击按钮时，我尝试了这个：

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

有没有办法更改滑块值并在按钮点击时移动它？

Answer 1

使用val()

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

https://jsfiddle.net/9jfst447/

Answer 2

您可以使用var sliderelement = $( "#slide" ); btnZoomIn.click(function() { sliderelement.val(function( index, value ) { return parseInt(value,10) + 30; }); sliderelement[0].onchange() });的回调函数，然后触发onchange事件：

SELECT coupon_code, order_id, im.meta_value, 
CONCAT((SELECT pm.meta_value FROM `youwp_postmeta` AS pm WHERE pm.meta_key = 
'_billing_first_name' AND order_id = pm.post_id), ' ',
(SELECT pm.meta_value FROM `youwp_postmeta` AS pm WHERE pm.meta_key = 
'_billing_last_name' AND order_id = pm.post_id)) AS name

FROM 
`youwp_woocommerce_order_items` AS i,
`youwp_woocommerce_order_itemmeta` AS im,
`youwp_postmeta` AS pm,
`you_ambassador` AS a

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

2 个答案: