html input range,html - HTML5 input type range show range value - Stack Overflow

I have a solution that involves (Vanilla) JavaScript, but only as a library. You habe to include it once and then all you need to do is set the appropriate source attribute of the number inputs.

The source attribute should be the querySelectorAll selector of the range input you want to listen to.

It even works with selectcs. And it works with multiple listeners. And it works in the other direction: change the number input and the range input will adjust. And it will work on elements added later onto the page (check https://codepen.io/HerrSerker/pen/JzaVQg for that)

Tested in Chrome, Firefox, Edge and IE11

;(function(){

function emit(target, name) {

var event

if (document.createEvent) {

event = document.createEvent("HTMLEvents");

event.initEvent(name, true, true);

} else {

event = document.createEventObject();

event.eventType = name;

}

event.eventName = name;

if (document.createEvent) {

target.dispatchEvent(event);

} else {

target.fireEvent("on" + event.eventType, event);

}

}

var outputsSelector = "input[type=number][source],select[source]";

function onChange(e) {

var outputs = document.querySelectorAll(outputsSelector)

for (var index = 0; index < outputs.length; index++) {

var item = outputs[index]

var source = document.querySelector(item.getAttribute('source'));

if (source) {

if (item === e.target) {

source.value = item.value

emit(source, 'input')

emit(source, 'change')

}

if (source === e.target) {

item.value = source.value

}

}

}

}

document.addEventListener('change', onChange)

document.addEventListener('input', onChange)

}());

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20