How to show the value of Range Slider on the thumb of the Slider?

Question

This is an odd request; However, what would be the best method to display the value of an HTML5 range-slider on the thumb of the slider?! the thumb will be animated onLoad s

Answer 1

Webkit allows you to target the thumb with css :

.range-consideration::-webkit-slider-thumb::before {
    content: "test";
}

That will print test on the thumb. However, using attr(value) doesn't seem to work, so I don't know how to show the value. Maybe you can find a way by playing with css variables and changing it with javascript.

The equivalent for other browsers are ::-moz-range-thumb and ::-ms-thumb.

---

EDIT : This is really (really !) a dirty way, but it works and it's doable as long as you have a relatively limited range of values.

HTML :

CSS :

.range-consideration[value="1"]::-webkit-slider-thumb::before { content: "1"; color: black; }
.range-consideration[value="2"]::-webkit-slider-thumb::before { content: "2"; color: black; }
.range-consideration[value="3"]::-webkit-slider-thumb::before { content: "3"; color: black; }
.range-consideration[value="4"]::-webkit-slider-thumb::before { content: "4"; color: black; }
.range-consideration[value="5"]::-webkit-slider-thumb::before { content: "5"; color: black; }
.range-consideration[value="6"]::-webkit-slider-thumb::before { content: "6"; color: black; }
.range-consideration[value="7"]::-webkit-slider-thumb::before { content: "7"; color: black; }
.range-consideration[value="8"]::-webkit-slider-thumb::before { content: "8"; color: black; }
.range-consideration[value="9"]::-webkit-slider-thumb::before { content: "9"; color: black; }
.range-consideration[value="10"]::-webkit-slider-thumb::before { content: "10"; color: black; }