Форум

dmitry111 · #1 (**permalink**) 19.08.2012, 13:28

Помогите составить функцию.

Имеется:

два независимые между собой инпута:

<input type="range" min="1" max="10" id="range1" value="5">
<input type="range" min="1" max="10" id="range2" value="5">

Значения по умолчанию у них одинаковы!

необходимо составить функцию, которая при вызове будет анализировать значения инпутов и в случае изменений в одном из них, записывать в другой такое же значение и возвращать это новое значение.

dmitry111 · #2 (**permalink**) 19.08.2012, 13:32

можно даже не кодом, а на словах сказать

nerv_ · #3 (**permalink**) 19.08.2012, 13:47

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script>
      $(function() {
        
        var inputs = $( 'input[type="range"]' );
        $( inputs ).on( 'change', handler );
        
        function handler() {
          var value = this.value
          $( inputs ).each( function( index ) {
            inputs[ index ].value = value;
          });
        }
        
      })
    </script>
  </head>
  <body>
	<input type="range" min="1" max="10" id="range1" value="5">
	<input type="range" min="1" max="10" id="range2" value="5">
  </body>
</html>

dmitry111 · #4 (**permalink**) 19.08.2012, 13:55

Точно, массивом. спасибо!

bes · #5 (**permalink**) 19.08.2012, 22:57

без jq никуда

<input type="range" min="1" max="10" id="range1" value="5">
<input type="range" min="1" max="10" id="range2" value="5">

<script>
window.onload = function () {
	var range1 = document.getElementById('range1');
	var range2 = document.getElementById('range2');

	document.body.onchange = function (e) {
		var target = e.target;
		if (target.id == 'range1') {
			range2.value = target.value;
		} else 
		if (target.id == 'range2') {
			range1.value = target.value;
		}
	}
	
}
</script>

PS: видимо нужна поддержка только хрома и оперы (может быть сафари)
http://htmlbook.ru/html/input/type
https://developer.mozilla.org/en-US/.../Element/input

dmitry111 · #6 (**permalink**) 20.08.2012, 10:51

спасибо!

Форум

Справочник

Discord чат

Курсы javascript