How to get range slider value in alert box using jQuery?

Question

I have a bootstrap range slider where I define minimum and maximum value. Now, What I want when I slide slider then I get its minimum and maximum value in alert box using jQuery. So, How can I do this? Please help me.

<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

I don't think you would want this, as this creates a lot of alerts since it's range input.

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


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

Answer 2

If I understand correctly, you'll need something like this (it isn't jQuery, just plain 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

I am not exactly sure what you are trying to accomplish. However, if you just want to alert the current values of the range slider, then you can do it like so:

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

This will alert the max value range slider. You can recreate this function to get the min value as well. I hope this helps you out!