Question

我有一个引导范围滑块，在其中定义了最小值和最大值。现在，我想要什么，当我滑动滑块时，我会使用jQuery在警报框中获取其最小值和最大值。那么，我该怎么做？请帮我。

<div data-role="rangeslider">
    <label for="price-min">Price:</label>
    <input type="range" name="price-min" id="price-min" value="500" min="0" max="2000">
    <label for="price-max">Price:</label>
    <input type="range" name="price-max" id="price-max" value="1000" min="0" max="2000">
</div>

Answer 1

我不希望您这样做，因为它是范围输入，因此会产生很多警报。

$('[name="price-min"]').on('input', function(e){
  alert( $(this).val() );
})


$('[name="price-max"]').on('input', function(e){
  alert( $(this).val() );
});

Answer 2

如果我理解正确，那么您将需要以下内容（不是jQuery，只是纯JS）：

document.getElementById('range-min').addEventListener('change',e=>{
    alert(e.target.value)
})
document.getElementById('range-max').addEventListener('change',e=>{
    alert(e.target.value)
})

Answer 3

我不确定您要完成什么。但是，如果您只想警告范围滑块的当前值，则可以这样做：

// Var declarations
   var priceMax = $('#price-max');
   var maxValue = $('#max-results');

// Get max value
maxValue.html(priceMax.attr('value'));

priceMax.on('change',function(){
   alert('The current max value is: '+ $(this).val() + '$.');
});

这将提醒最大值范围滑块。您可以重新创建此函数以获取最小值。希望这对您有所帮助！

如何使用jQuery在警报框中获取范围滑块值？

3 个答案: