Bootstrap range slider with displayed values

Question

I checked Bootstrap 4 documentation for the range slider and answers here on SO, but can't find a way for the slider to display the value when the track is being moved.

I see open-source projects like seiyria/bootstrap-sliderand which allow you to do that, but is there really no built-in way (bootstrap parameter) to display values when the track is moved?

question from:https://stackoverflow.com/questions/65856695/bootstrap-range-slider-with-displayed-values

Answer 1

Answer is no, there is no default way.

My workaround is below. After looking at a bunch of solutions and noticing how incosistent they are across browsers devices decided that it's best to just output the selection in real time in a div container.

Slider HTML:

<div class="form-group mt-4 text-center">
<label for="price"><h4>Minimum price</h4></label>

<div class="price">500000</div>
<input type="range" class="custom-range" min="20000" max="1000000" step="10000" id="customRange3" name="Price" value="500000" style="width: 100%">

This will output in real time the currently selected range inside a div contained (requires jquery)

<script>
$( document ).ready(function() {
    $('#customRange3').on('input', function(){
         v = $('#customRange3').val();
         console.log(v);
         $('div.price').text(v);
    });
});
</script>

Now, as you slide the tracker up and down it will update the number below 'Result'