Suwak z dwoma przesuwkami JS

Cześć forumowicze pasji informatyki. Zwracam się do was z pewnym problemem, który nie daje mnie żyć. Utworzyłem suwak do zmiany wartości liczbowej. Teraz chciałbym zrobić aby na owym suwaku były dwie przesuwki do zmiany wartości. Jak kiedyś było na sklepach. Jeden pokazujący minimum, drugi maksimum. I tu się zaczynają schody. Wiem jak zrobić aby była jedna, ale dwie? Teoretycznie znalazłem przykład z dwiema przesuwkami ale za cholerę nie mogę dojść do tego jak wyświetlić wartości z ruchu nimi. Poniżej wrzucam kod źródłowy mój oraz przykładu. Dodam jeszcze, że chciałbym to zrobić w czystym JS, nie w Jquery. Z góry dziękuję za odpowiedź :).

Mój kod:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="css/text" href="css.css">
<script>
function fpasek(val)
{
document.getElementById('filterprice1').value = val;
} 

function fpasek1(val1)
{
document.getElementById('filterprice2').value = val1;
}
</script>
</head>
<body>
<li class="priceinput">
<span class="fromto">
Od
</span> 
<input type="text" id="filterprice1" value="0" class="short"><br>
<span class="fromto">
Do
</span> 
<input type="text" id="filterprice2" value="100">
<div class="bottombuttons">
</div>

<div class="paseczek">
<input type="range" multiple min="0" max="100" value="0" id="my_slider" oninput="fpasek(this.value)">
<input type="range" multiple min="0" max="100" value="100" id="ghost" oninput="fpasek1(this.value)">
</div>
</li>
</body>
</html>

Przykład:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
@supports (--css: variables) {
	input[type="range"].multirange {
		padding: 0;
		margin: 0;
		display: inline-block;
		vertical-align: top;
	}

	input[type="range"].multirange.original {
		position: absolute;
	}

		input[type="range"].multirange.original::-webkit-slider-thumb {
			position: relative;
			z-index: 2;
		}

		input[type="range"].multirange.original::-moz-range-thumb {
			transform: scale(1); /* FF doesn't apply position it seems */
			z-index: 1;
		}

		input[type="range"].multirange::-moz-range-track {
			border-color: transparent; /* needed to switch FF to "styleable" control */
		}

	input[type="range"].multirange.ghost {
		position: relative;
		background: var(--track-background);
		--track-background: linear-gradient(to right,
				transparent var(--low), var(--range-color) 0,
				var(--range-color) var(--high), transparent 0
			) no-repeat 0 45% / 100% 40%;
		--range-color: hsl(190, 80%, 40%);
	}

		input[type="range"].multirange.ghost::-webkit-slider-runnable-track {
			background: var(--track-background);
		}

		input[type="range"].multirange.ghost::-moz-range-track {
			background: var(--track-background);
		}

}

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

</head>
<body>
<script>
(function() {
"use strict";

var supportsMultiple = self.HTMLInputElement && "valueLow" in HTMLInputElement.prototype;

var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");

self.multirange = function(input) {
	if (supportsMultiple || input.classList.contains("multirange")) {
		return;
	}

	var value = input.getAttribute("value");
	var values = value === null ? [] : value.split(",");
	var min = +(input.min || 0);
	var max = +(input.max || 100);
	var ghost = input.cloneNode();

	input.classList.add("multirange", "original");
	ghost.classList.add("multirange", "ghost");

	input.value = values[0] || min + (max - min) / 2;
	ghost.value = values[1] || min + (max - min) / 2;
	document.getElementById('cena1').value = input.value;
	document.getElementById('cena2').value = ghost.value;


	input.parentNode.insertBefore(ghost, input.nextSibling);

	Object.defineProperty(input, "originalValue", descriptor.get ? descriptor : {
		// Fuck you Safari >:(
		get: function() { return this.value; },
		set: function(v) { this.value = v; }
	});

	Object.defineProperties(input, {
		valueLow: {
			get: function() { return Math.min(this.originalValue, ghost.value); },
			set: function(v) { this.originalValue = v; },
			enumerable: true
		},
		valueHigh: {
			get: function() { return Math.max(this.originalValue, ghost.value); },
			set: function(v) { ghost.value = v; },
			enumerable: true
		}
	});

	if (descriptor.get) {
		// Again, fuck you Safari
		Object.defineProperty(input, "value", {
			get: function() { return this.valueLow + "," + this.valueHigh; },
			set: function(v) {
				var values = v.split(",");
				this.valueLow = values[0];
				this.valueHigh = values[1];
				update();
				document.getElementById('cena1').value=this.valuesLow;
			},
			enumerable: true
		});
	}

	if (typeof input.oninput === "function") {
		ghost.oninput = input.oninput.bind(input);
	}

	function update() {
		ghost.style.setProperty("--low", 100 * ((input.valueLow - min) / (max - min)) + 1 + "%");
		ghost.style.setProperty("--high", 100 * ((input.valueHigh - min) / (max - min)) - 1 + "%");
	}

	input.addEventListener("input", update);
	ghost.addEventListener("input", update);
	update();
	
}

multirange.init = function() {
	[].slice.call(document.querySelectorAll("input[type=range][multiple]:not(.multirange)")).forEach(multirange);
}

if (document.readyState == "loading") {
	document.addEventListener("DOMContentLoaded", multirange.init);
}
else {
	multirange.init();
}


})();



</script>
<h2>Floating point boundaries</h2>
<input type="range" multiple value="0" /><br>
<input type="text" id="cena1" value="0" class="short" /><br>
<input type="text" id="cena2" value="100" class="short" /><br>
</body>
</html>

Oraz shreeny jak to wygląda u mnie i w przykładzie:
Mój: