Forum PHP.pl > [html5+css+jquery] Suwak zmieniający dynamicznie dwie wartości

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [html5+css+jquery] Suwak zmieniający dynamicznie dwie wartości

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

miccom

27.05.2013, 18:34:05

Witam.
Szukam patentu, jak przygotować ładny suwak, który podczas przesuwania będzie ujmował jedną wartość a dodawał pomnożoną *4

[HTML] pobierz, plaintext 
Wybierz liczbę: <input type='range' min=2 max=12 id='liczba'></input>
[HTML] pobierz, plaintext

Chciałbym tak, aby przy "przesuwaniu" suwaka w jednym div liczba się zmniejszała o jeden, a w drugim div liczba zwiększała się o 20...
Proszę o pomoc, jak najlepiej to ugryźć i rozkminić

Pozdrawiam.
miccom

Arcioch

27.05.2013, 19:58:52

jQuerz Ui Slider + odpowiednie przechwycenie wartości + działania na liczbach w divach

miccom

30.05.2013, 16:45:27

Hmm, a jak przechwycić taką wartość?

markonix

30.05.2013, 18:50:08

W 4 przykładzie masz już metodę (sam przykład jest nadmiarowy w kontekście Twojego problemu).

miccom

30.05.2013, 22:46:27

OK, dziękuje za pomoc.
Wygooglowałem tak:

[HTML] pobierz, plaintext 
<script>
onload = function() {
  var $ = function(id) { return document.getElementById(id); };
  $('one').oninput = function() { $('uno').innerHTML = 150-this.value; $('due').innerHTML = this.value*20;};
  $('one').oninput();
};
</script>
</head>
<body>
 
<div id="golden">
	GOLD
	<div id="uno"></div>
</div><div id="suwak"><input type="range" id="one" min="0" max="150" value="0"/></div>
<div id="credits">
CREDITS
	<div id="due">&nbsp;</div>
</div>
[HTML] pobierz, plaintext

i pięknie śmiga:)
Pozdrawiam.
miccom

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.