Ericka Anne free asked 6 years ago


I want to always display the value of the range slider. It only appears on click and slide. I want it to always show the value bubble above the line if possible! Thanks!

Rafał Rogulski free answered 6 years ago


Hi, It possible, little CSS, JS and should work.
.thumb {
    border-radius: 50% 50% 50% 0 !important;
    height: 30px !important;
    width: 30px !important;
    margin-left: -15px !important;
    top: -20px !important;
    left: 50%;
}

input[type=range] + .thumb .value {
    color: #fff;
    margin-left: -1px;
    margin-top: 8px;
    font-size: 10px;
}
and JS :
$(document).ready(function() {
    $('.range-field').each(function() {
    $(this).find('.value').html('50');
    });
});
This work with default range from MDB documentation. When you have set 'value' attribute you must change the value in .html('your value'); and .thumb in left: your value;, also this script set this value for all range input. Regards

jkilbride free answered 6 years ago


I don't know how to get the bubble to show, but I use a label with some javascript to always display the current value:

<div class="range-field">
  <input type="range" min="0" max="100" value="10" id="my-range">
  <label for="my-range">Initial value (10)</label>
</div>

<script>
  $('#my-range').on('change input', function() {
      var $this = $(this);
      $this.siblings('label').html('Current value (' + $this.val() + ')');
  });
</script>
Hope this helps!

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No