Изменение атрибутов min/max в зависимости выбора input radio

[Windwonder]

Всем привет.
Помогите создать связь input number и radio.
В форме есть поле выбора значения radio и поле ввода чисел с атрибутами min/max.
Как, с помощью javascript осуществить изменение атрибутов min/max в зависимости от выбора radio?

Так же интересует обратных ход событий. Можно ли реализовать автоматический выбор radio в зависимости от ввода числа из определённых диапазонов?

 

[ykpon]

Если на чистом JS, без jQuery, то можно так:

<input type="range" min="0" max="100" step="1" value="50" id="range"><br>
<input type="number" id="min">min<br>
<input type="number" id="max">max<br>
<span id="range_val"></span>
<script>
var range = document.getElementById("range"),
  result = document.getElementById("range_val"),
  min = document.getElementById("min"),
  max = document.getElementById("max");
range.addEventListener("input", function() {
  result.innerHTML = range.value;
}, false);
min.addEventListener("input", function() {
  range.setAttribute("min", min.value);
}, false);
max.addEventListener("input", function() {
  range.setAttribute("max", max.value);
}, false);
</script>

Пример Для просмотра ссылки Войди или Зарегистрируйся.
Что оставить, а что убрать, думаю, сам разберешься.

 

[Windwonder]

Что оставить, а что убрать, думаю, сам разберешься.

Благодарю за пример, разобрался с первым вопросом... А вот второй (изменение выбора radio в зависимости от ввода input number) остается открытым. Например: есть 5 полей input type="radio" и одно поле input type="number". Если number value будет введено в диапазоне от 1 до 10, то скрипт автоматом чекает первое поле radio, если number value будет введено в диапазоне от 10 до 20, то чекает второе поле radio и т.д.

 

[Absolute]

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<input data-min="0" data-max="20" type="radio" name="radio" class="radio">
  <input data-min="21" data-max="100" type="radio" name="radio" class="radio">
<input data-min="101" data-max="200" type="radio" name="radio" class="radio">
  <br>
  <input id="number" type="number" min="8" max="20">
<script>
$(document).ready(function(){
  var r = $('.radio'),
      n = $('#number');
  r.on('change', function(){   
    n.attr( $(this).data() );   
  });
  n.on('change input', function(){
    var val = ~~this.value || 0;
    r.each(function(){
      var th = $(this),
          min = ~~th.data().min || 0,
          max = ~~th.data().max || 0;
      if(val >= min && val <= max){
        th.prop('checked', true);
      }
    });
  })
});
</script>