Search code examples
jqueryrangeslidertooltipbootstrap-5

How to update value tooltip range boostrap?

i'm use bootsrap 5.0.2

<div class="mb-3">
    Kecerahan <input type="range" class="form-control" id="kecerahan" name="kecerahan" min="1" max="255" value="100" data-bs-toggle="tooltip" title="100" aria-describedby="Kecerahan" required>
</div>

And in javvascript i'm try this, but this code not work.

$(function() {
   var tooltip = new bootstrap.Tooltip(
   $("#kecerahan"));
       tooltip.show();
       $("#kecerahan").change(function() {
           $("#kecerahan").attr('title', $(this).val());
       });
   });
});

How change tooltip value after change slide value?

Solution

  • You can try this:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

$("#kecerahan").on('change', function() {
   let value = $(this).val();
   $(this).attr('title', value);
});