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

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() + '$.');
});

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