How to show range element value with an ondrag update of 0-100?

Question

How to show range element value, ondragging its values should be 0-100 values when user drags that range then that values should appear like tool tip.

0<input type="range" id="range"/>100

http://stackoverflow.com/questions/10004723/html5-input-type-range-show-range-value — epascarello, Sep 30 '16 at 13:23
Ya But My Requirement That Value Changed In Tool tip On Dragging (that range value should be in tool tip) how ? give an idea i know how to get value but how to get values frequently on Draging. It will shown an tooltip — Samudrala Ramu, Sep 30 '16 at 13:31
http://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging — epascarello, Sep 30 '16 at 13:33

score 4 · Accepted Answer · answered Sep 30 '16 at 13:38

There are many possibilities to achieve this result. If you want to use the tooltip you may to take a look to Defining_Cross-Browser_Tooltips.

Instead, you may create your own tooltip with css and update its value while dragging:

document.getElementById('range').addEventListener('input', function(e) {
  //this.title = this.value;
  document.getElementsByClassName('tooltiptext')[0].textContent = this.value;
})

.tooltip {
  position: relative;
  display: inline-block;
  margin-top: 100px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
    <div class="tooltip">
        0<input type="range" id="range" value="0" min="0" max="100"/>100
        <span class="tooltiptext">0</span>
    </div>
</form>

Nice, Tanks For Your Answer . – Samudrala Ramu Oct 03 '16 at 04:00 — Samudrala Ramu, Oct 03 '16 at 04:00

score 0 · Answer 2 · edited Jan 02 '18 at 16:57

I made a simple JQ below.

The tool-tip (if you want it to follow and move depending on the range button as you slide left and right) is much more complicated to do, and this is not a code making site. If you try something and you don't succeed please show us that.

In the mean time, see this link. It might help you, start from here: Range Input Value Bubbles

$("input").on("change mousemove",function(){
$('output').html( $(this).val() );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
0<input type="range" id="range" min="0" max="100"/>100
<output for="range" ></output>

How to show range element value with an ondrag update of 0-100?

2 Answers2