Как при движении ползунка у input range синхронно сдвигать другой элемент?

Question

[Серафим]

Всем привет! Начал практиковаться в верстке, в задании нужно немного js'a, изучение которого у меня пока на стадии планирования. Нужно сделать вот такой слайдер.
Вернее, слайдер уже сделать, осталось сделать, чтобы прямоугольник над ползунком двигался вместе с ним и получал значения инпута. Принимать значения получилось, а с движением прямоугольника проблемы. Пытался делать через onmouseup/onmousedown, но не придумал как сделать координаты Y постоянные и элемент убегал к верхушке страницы.

Answer 1

[Роман]

Просто не изменяйте координату Y.

PS: более детальный ответ смогу дать если вы дадите ваш код, а еще лучше разместите ваш пример на jsfiddle или codepen.

PPS: ловите рабочий вариант.

Comments

[Серафим]

Оставить Y не изменой- первое, что пришло мне в голову. Сам я в эвентах не силен(как и в js), смог только смог частично адаптировать найденный код под себя. Что то получилось, но не совсем то, что мне нужно.
https://codepen.io/Mr_Pride/pen/WWVPLw(пока только левый слайдер пытаюсь изменить)
Пусть вас не смущают названия классов, я параллельно осваиваю БЭМ(тяжеловато с наименованием классов). Заранее спасибо!

[Роман]

Серафим, вот, пользуйтесь:

[Серафим]

Роман, Спасибо вам большое! Все четко и ясно)

[Роман]

Серафим, не за что. Не забудте отметить решением.