Forum PHP.pl

Witam Forumowiczów.
W swoim projekcie zaprzągłem do pracy skrypt (rangeSlider).

Moim celem jest przerobienie oryginalnego skryptu w taki sposób, aby użytkownik mógł posługiwać się zarówno "suwakiem", jak i polem input, wprowadzając tym samym swoją wagę lub wzrost i aby te zmiany były "od razu widoczne".
Oryginalny kod ma co prawda takie rozwiązanie, ale nie jest dla mnie wystarczające (sekcja "Programmatic value changes" na stronie domowej rangeSlider'a) - tam trzeba kliknąć na przycisk, aby wartość na suwaku uległa zmianie, co powoduje w moim przypadku submit całego formularza z pytaniami w ankiecie.

Kod HTML5:

[HTML] pobierz, plaintext 
<div class="range">
	<label for="answer_text[1]">Waga (kg)</label>
	<input id="chanceSlider1" name="answer_text[1]" type="range" min="25" max="250" step="0.1" value="50" data-rangeslider>
	<div id="ch1"><output></output></div>
	<input id="chance1" name="chance1" type="text" value="50">
</div>
<div class="range">
	<label for="answer_text[2]">Wzrost (cm)</label>
	<input id="chanceSlider2" name="answer_text[2]" type="range" min="120" max="250" step="0.1" value="50" data-rangeslider>
	<div id="ch2"><output></output></div>
	<input id="chance2" name="chance2" type="text" value="120">
</div>
[HTML] pobierz, plaintext 

Kod JS:

[HTML] pobierz, plaintext 
(function($) {
	var $document = $(document);
	var selector = '[data-rangeslider]';
	var $element = $(selector);
 
	// For ie8 support
	var textContent = ('textContent' in document) ? 'textContent' : 'innerText';
 
	function valueOutput(element) {
		var value = element.value;
		var output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0];
 
		output[textContent] = value;
	}
 
	$document.on('input', 'input[name="answer_text"], ' + selector, function(e) {
		valueOutput(e.target);
	});
 
	$('#chanceSlider1').on('input change', function(){
		$('#chance1').val($('#chanceSlider1').val());
	});
	$('#chance1').on('keyup', function(){
		$('#ch1 output').val($('#chance1').val());
	});
 
	$('#chanceSlider2').on('input change', function(){
		$('#chance2').val($('#chanceSlider2').val());
	});
	$('#chance2').on('keyup', function(){
		$('#ch2 output').val($('#chance2').val());
	});
/*
	$document.on('click', '#js-example-change-value button', function(e) {
		var $inputRange = $(selector, e.target.parentNode);
		var value = $('input[name="answer_text"]', e.target.parentNode)[0].value
 
		$inputRange.val(value).change();
	});
*/
	$element.rangeslider({
		polyfill: false,
		onInit: function() {
			valueOutput(this.$element[0]);
		},
		onSlide: function(position, value) {
			console.log('onSlide');
			console.log('position: ' + position, 'value: ' + value);
		},
		onSlideEnd: function(position, value) {
			console.log('onSlideEnd');
			console.log('position: ' + position, 'value: ' + value);
		}
	});
})(jQuery);
[HTML] pobierz, plaintext 

Po przeróbkach skrypt reaguje na wpisane wartości do pola input, zmienia wartość w <output>, ale nie zmienia wartości suwaka (<input id="chanceSlider1">) - stoi w miejscu, jak zaklęty. Nie za bardzo wiem, w jaki sposób to poprawić. Zdaję sobie sprawę, że mój kod nie jest profesjonalny - nie czuję się omnibusem, jeśli chodzi o JS, więc wybaczcie.

Gdyby ktoś z Was poświęcił swój czas i poradził coś na te moje problemy ze sliderem, będę wdzięczny.

Pozdrawiam wszystkich czytających tego posta.

Dziękuję Ci za poświęcony czas i namiary na rozwiązanie moich bolączek. Biblioteka rangeSlider skusiła mnie chyba ładnym opakowaniem z napisem CSS, ale ma swoje minusy - za dużo kodu JS do ogarnięcia.

Pozdrawiam.