Range Slider Thumb Value

Topic: Range Slider Thumb Value

Ericka Anne asked 8 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!

Add comment

jkilbride answered 8 years ago

0 0 Best answer

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!

Add comment

Rafał Rogulski answered 8 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Specification of the issue

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

Ericka Anne

0Support score
2Questions 0Answers

0Snippets likes 0Snippets