Как для нескольких input[type="range"] вывести значение при слайде?

Question

[Сергей Бурдужа]

У меня есть маленький проект на : https://jsfiddle.net/serii/vuo32u87/
Хочу понять как работает плагин rangeslider, вот ссылка на него: https://github.com/andreruffert/rangeslider.js
Проблема в том, что когда скролю один слайдер, то сбрасывается значение у всех остальных ползунков, а нужно, чтобы менялось значение только текущего слайдера. У меня в коде где-то ошибка, помогите найти.

Answer 1

[Артем]

Ну вы же сами написали each по всем элементам с классом '.js-range'.
Используйте #id, а не .class, если нужна работа с индивидуальными слайдерами.
Или я не правильно понял вопрос?

Вот так вот получилось: https://jsfiddle.net/vuo32u87/3/

Comments

[Сергей Бурдужа]

Вы так имели в виду: https://jsfiddle.net/serii/vuo32u87/6/ , только так не работает.

[Артем]

Я вот тут реализовал, вроде оно?
https://jsfiddle.net/vuo32u87/3/

[Сергей Бурдужа]

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

Answer 2

[Alexander Sydorenko]

Вот здесь более лаконично, правда используя внутренние особенности rangeslider.. но кода меньше, и работает

https://jsfiddle.net/sz2Lz4tk/1/

Упсь, не ту ссылку сначала поставил..

Comments

[Сергей Бурдужа]

Вы мне не то прислали....

[Alexander Sydorenko]

Уже исправился :)

[Сергей Бурдужа]

Да, спасибо, то что надо...

[Артем]

Сама лаконичность: https://jsfiddle.net/vuo32u87/8/
И #id не нужны

[Сергей Бурдужа]

Артем: Это очень интересное решение, но до него нужно еще немного дорасти.