CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapsliderrange
Frens
Frens

Reputation: 149

Bootstrap 4.3 Slider - how to catch event during slide with jQuery?

I am trying to catch the value of the slider during the slide. I can get it when the slide is released, with the new value, but I cannot seem to find the right event that is triggered during the slide. Looked online but mainly the resources push you to include other libraries. Is there a simple way to do this with standard Bootstrap components and events?

HTML

  <div class="custom-control custom-range">
        <input id="IDbuttonTBD4" class="custom-range" type="range">
        <label for="IDbuttonTBD4"></label>
   </div>

JSS

$("#IDbuttonTBD11").change(function (e) {
    var selection = $(this).val();

    // rest of the code here...
});

Upvotes: 2

Views: 766

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14423

Use the input change listeners:

$(document).ready(function() {
  const $value = $('#slider');
  $value.on('input change', () => {
    console.log($value.val());
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<label for="slider">Range 0 - 100</label>
<input type="range" class="custom-range" id="slider">

Upvotes: 2

Related Questions