Как вывести значение range над ползунком?

Question

[Артём Цымбалюк]

Здравствуйте. Как над ползунком

<input class="range-style" type="range" min="0" max="100" step="1" value="50">

вывести значение? Как вот здесь:
Плюс сразу зайду вперед, помимо цифр в значении выводится ещё и знак %
К сожалению c JS не очень сильно дружу, на уровне подключения какой-то библиотеки, да и как это верхнее окошко привязать к этой кнопке не понимаю

Codepen

Буду благодарен любому ответу

Answer 1

[Алексей]

Не то, что нужно, но промежуточный вариант: https://jsfiddle.net/insp1/1n5am754/.

Если времени нет, то быстрее будет подключить jQuery UI: https://jqueryui.com/slider/#steps

Answer 2

[Ilya]

Если ты плагин используешь, залезь в исходники и там где разметка ползунка, добавь span какой нибудь и в него записывай value, никто за тебя это не сделает, заодно и js повод подтянуть! Потом будешь подобное на раз-два делать, сам такой был

Comments

[Артём Цымбалюк]

Илья не тот случай, плагины не использую, ползунок пока на чистом css. А в условиях сжатых сроков не могу поиграться (

Answer 3

[Ranwise]

поищите на codepen