https://www.wanderinstitut.de/js/multirange.js

1(function() {
2"use strict";
3
4// Don't attempt to pollyfill when using SSR
5if (typeof self === "undefined" || !self.HTMLInputElement) {
6	return;
7}
8
9var supportsMultiple = self.HTMLInputElement && "valueLow" in HTMLInputElement.prototype;
10
11var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
12
13var multirange = function(input) {
14	if (supportsMultiple || input.classList.contains("multirange")) {
15		return;
16	}
17
18	var value = input.getAttribute("value");
19	var values = value === null ? [] : value.split(",");
20	var min = +(input.min || 0);
21	var max = +(input.max || 100);
22	var ghost = input.cloneNode();
23	var dragMiddle = input.getAttribute("data-drag-middle") !== null;
24	var middle = input.cloneNode();
25
26	input.classList.add("multirange");
27	input.classList.add("original");
28	ghost.classList.add("multirange");
29	ghost.classList.add("ghost");
30
31	input.value = values[0] || min + (max - min) / 2;
32	ghost.value = values[1] || min + (max - min) / 2;
33
34	input.parentNode.insertBefore(ghost, input.nextSibling);
35
36	Object.defineProperty(input, "originalValue", descriptor.get ? descriptor : {
37		// Fuck you Safari >:(
38		get: function() { return this.value; },
39		set: function(v) { this.value = v; }
40	});
41
42	Object.defineProperties(input, {
43		valueLow: {
44			get: function() { return Math.min(this.originalValue, ghost.value); },
45			set: function(v) { this.originalValue = v; update(); },
46			enumerable: true
47		},
48		valueHigh: {
49			get: function() { return Math.max(this.originalValue, ghost.value); },
50			set: function(v) { ghost.value = v; update(); },
51			enumerable: true
52		}
53	});
54
55	if (descriptor.get) {
56		// Again, fuck you Safari
57		Object.defineProperty(input, "value", {
58			get: function() { return this.valueLow + "," + this.valueHigh; },
59			set: function(v) {
60				var values = v.split(",");
61				this.valueLow = values[0];
62				this.valueHigh = values[1];
63				update();
64			},
65			enumerable: true
66		});
67	}
68
69	if (typeof input.oninput === "function") {
70		ghost.oninput = input.oninput.bind(input);
71	}
72
73	function update(mode) {
74		ghost.style.setProperty("--low", 100 * ((input.valueLow - min) / (max - min)) + 1 + "%");
75		ghost.style.setProperty("--high", 100 * ((input.valueHigh - min) / (max - min)) - 1 + "%");
76
77		if (dragMiddle && mode !== 1) {
78			var w = input.valueHigh - input.valueLow;
79			if (w>1) w-=0.5;
80			middle.style.setProperty("--size", (100 * w / (max - min)) + "%");
81			middle.value = min + (input.valueHigh + input.valueLow - 2*min - w)*(max - min)/(2*(max - min - w));
82		}
83		// Switch colors in IE
84		if (input.value > ghost.value) {
85			input.classList.add("switched");
86			ghost.classList.add("switched");
87		} else {
88			input.classList.remove("switched");
89			ghost.classList.remove("switched");
90		}
91	}
92
93	ghost.addEventListener("mousedown", function passClick(evt) {
94		// Find the horizontal position that was clicked
95		var clickValue = min + (max - min)*evt.offsetX / this.offsetWidth;
96		var middleValue = (input.valueHigh + input.valueLow)/2;
97		if ( (input.valueLow == ghost.value) == (clickValue > middleValue) ) {
98			// Click is closer to input element and we swap thumbs
99			input.value = ghost.value;
100		}
101	});
102	input.addEventListener("input", update);
103	ghost.addEventListener("input", update);
104
105	if (dragMiddle) {
106		middle.classList.add("multirange");
107		middle.classList.add("middle");
108		input.parentNode.insertBefore(middle, input.nextSibling);
109		middle.addEventListener("input", function () {
110			var w = input.valueHigh - input.valueLow;
111			var m = min + w/2 + (middle.value - min)*(max - min - w)/(max-min);
112			input.valueLow = m - w/2;
113			input.valueHigh = input.valueLow+w;
114			update(1);
115		});
116	}
117
118	update();
119}
120
121multirange.init = function() {
122	[].slice.call(document.querySelectorAll("input[type=range][multiple]:not(.multirange)")).forEach(multirange);
123}
124
125if (typeof module === "undefined") {
126	self.multirange = multirange;
127	if (document.readyState == "loading") {
128		document.addEventListener("DOMContentLoaded", multirange.init);
129	}
130	else {
131		multirange.init();
132	}
133} else {
134	module.exports = multirange;
135}
136
137})();