• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Suwak z dwoma przesuwkami JS

Object Storage Arubacloud
+1 głos
757 wizyt
pytanie zadane 13 września 2018 w JavaScript przez Radosław Foltyński Obywatel (1,180 p.)

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:

 

Przykład:

1 odpowiedź

0 głosów
odpowiedź 14 września 2018 przez ShiroUmizake Nałogowiec (46,300 p.)
Jeżeli to mają to być dwa suwaki to możesz to zrobić tak:

https://codepen.io/anon/pen/eLKwgM

Niestety zabawa wyglądem ich jest bardzo problematyczna i prawie każda przeglądarka inaczej to interpretuje.

Co do ułożenia wartości pod suwakiem możesz to zrobić na zdarzenie focus bądż onchange i dało się chyba złapać pozycje i pod tym span z tym położeniem na transform.

Przykład:

https://patrykmaternicki.github.io/InsuranceCalc/
komentarz 14 września 2018 przez Radosław Foltyński Obywatel (1,180 p.)
Ok dzięki za odp. Będę coś rozkminiać :).

Podobne pytania

0 głosów
1 odpowiedź 163 wizyt
pytanie zadane 27 grudnia 2019 w JavaScript przez Kolberg Obywatel (1,560 p.)
0 głosów
1 odpowiedź 3,960 wizyt
pytanie zadane 27 marca 2018 w JavaScript przez dmnkk Użytkownik (520 p.)
0 głosów
1 odpowiedź 520 wizyt
pytanie zadane 2 lipca 2017 w JavaScript przez Adam Ostrogórski Obywatel (1,070 p.)

92,681 zapytań

141,583 odpowiedzi

320,070 komentarzy

62,041 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...