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

Suwak z dwoma przesuwkami JS

VPS Starter Arubacloud
+1 głos
734 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ź 154 wizyt
pytanie zadane 27 grudnia 2019 w JavaScript przez Kolberg Obywatel (1,560 p.)
0 głosów
1 odpowiedź 3,874 wizyt
pytanie zadane 27 marca 2018 w JavaScript przez dmnkk Użytkownik (520 p.)
0 głosów
1 odpowiedź 509 wizyt
pytanie zadane 2 lipca 2017 w JavaScript przez Adam Ostrogórski Obywatel (1,070 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...