Бегунок на JS, как поправить?

Question

[Zombie42679]

Если бегунок изменяется, то выводится значения в input рядом, но как сделать, чтоб при вводе в input так же менялось значение бегунка? Нужно на чистом JS (учу его)

https://jsfiddle.net/g5697tmu/5/

Answer 1

[0xD34F]

<div class="range">
  <input type="range" min="0" max="100" step="1" value="20">
  <input type="text" value="20">
</div>

const range = document.querySelector('.range [type="range"]');
const text = document.querySelector('.range [type="text"]');
range.oninput = () => text.value = range.value;
text.oninput = () => range.value = text.value;

// или

document.querySelector('.range').addEventListener('input', e => {
  e.currentTarget.querySelectorAll('input').forEach(n => n.value = e.target.value);
});

// или

const inputs = document.querySelectorAll('.range input');
const onInput = e => inputs.forEach(n => n.value = e.target.value);
inputs.forEach(n => n.addEventListener('input', onInput));

Comments

[Zombie42679]

А почему мой пример не работал?

[0xD34F]

Потому что функция общая для обоих элементов, но поток данных обеспечивает только в одном направлении - от range'а к text'у.

[Zombie42679]

0xD34F, И так нельзя делать, верно ?

[0xD34F]

Можно. Но, очевидно, вам это не нужно.

[0xD34F]

Если хотите, чтобы была общая функция... Добавил в ответ пару вариантов.

Answer 2

[Stalker_RED]

https://jsfiddle.net/g5697tmu/7/

Answer 3

[B_Bear]

https://jsfiddle.net/pnz7rzaq/

Comments

[Zombie42679]

А почему мой пример не работал ?
Ведь там получается, что значения взаимосвязаны

[B_Bear]

Zombie42679, Нет, в вашем примере обработчик повешен лишь на бегунок и в нем происходит присваивание значения input-у в одностороннем порядке. Нужен обработчик на input, чтобы следить за вводом и присваивать значение бегунку.

[Zombie42679]

B_Bear, У вас ведь 2 функции, а в одну запихать все можно ?

Насколько я понимаю, если добавить такую же строчку myRangeInput.value = rng.value; , только наоборот, это не поможет

[B_Bear]

Zombie42679, Правильно понимаете. Это не поможет, потому что нам нужно, чтобы присваивание происходило по вводу в input. А если добавить эту строчку "в одну функцию", то присваивание будет происходить по задействованию бегунка.

[B_Bear]

Zombie42679, 2 функции - это 2 обработчика событий. Одна следит за передвижением бегунка, другая за вводом в Input.