Спаренный range input с двумя ползунками. Есть ли варианты получше чем в теле вопроса?

Question

[sim3x]

egorkhmelev.github.io/jslider
refreshless.com/nouislider

подборка
www.unheap.com/section/inputs-forms/input-sliders
- ion.rangeSlider
- rangeslider.js
- jQRangeSlider
- JQUERY UI SLIDER

Идеальный вариант два input[type=range] связанные между собой.
Как чистый JS, так и jQuery 1+ варианты

Comments

[Maksim Zverev]

А чем вас не устраивают представленные варианты ?

[sim3x]

Maksim Zverev: они не идеальны

Answer 1

[Денис Инешин]

Конечно же Ion.RangeSlider

Comments

[sim3x]

он есть в подборке www.unheap.com/section/inputs-forms/input-sliders
но спасибо

[Денис Инешин]

sim3x: рекомендую как автор)

[Денис Инешин]

sim3x: Вообще, я немного слежу за конкурентами, достойных только два: nouislider и jqrangeslider.

[sim3x]

Денис Инешин: те вариант с input[type=range] никто не реализовывал?

[Денис Инешин]

sim3x: input[type=range] сам по себе кастрированный, максимум что я видел с ним, это полифилы для старых браузеров.

[Денис Инешин]

sim3x: кстати, интересно было бы узнать ваше виденье, чего например не хватает Ion.RangeSlider до идеальности? У меня много планов с ним на будущее и люди многое просят реализовать. Чему отдать приоритет?

[sim3x]

Денис Инешин:
сильно нужна модульность
конечно у всех толстый инет, но 35KB~8KB на единственный инпут многовато

А так, только двигаться в сторону ангуляр-директив и плагинов для других библиотек-фреймов

[Денис Инешин]

sim3x: да, модульность присутствует в планах.

[Александр Таратин]

sim3x: https://css-tricks.com/styling-cross-browser-compa...

[sim3x]

Александр Таратин: осталось только добавить второй и синхронизировать их :)

[sim3x]

Денис Инешин:
>чего например не хватает Ion.RangeSlider до идеальности

++++ тесты!
++++ разделить код и представление - облегчит переход на shadow dom, внедрение в ангуляр и тп

+++ БЕМизировать стили: 1 елемент = класс + модификатор (опционильно)
+++ сборка на gulp-grunt

+ стили в less/sass/stylus в виде миксинов
+ autoprefixer - пусть сам пользователь решает, поддержка чего ему нужна
+ сделать все стилями и не использовать картинки
или
+ включить через base64 (поддержка ие7 ведь не нужна?) файл с картинками крошечный (gulp-inline-base64)
+ скины прицепить к миксинам

+ ES2015 + babel :)

[dom1n1k]

Денис Инешин: Для идеальности не хватает избавления от jQuery

[Денис Инешин]

dom1n1k: избавление от jQuery - ничем не оправданные трудозатраты.

[dom1n1k]

Денис Инешин: Хозяин-барин. Но аудиторию это точно сужает. Потому что если лет 5 назад jQuery по-любому был подключен на 99% сайтов, то сегодня уже заметен процент сайтов, где от него отказались. Либо просто за ненадобностью (потому что ванильного достаточно), либо ушли на более продвинутые вещи (всякие ангуляры и так далее).

А тянуть jQuery ради одного контрола... Я например не хочу. И поэтому я выбираю всегда noIUSlider вместо вашей библиотеки (а остальном безусловно симпатичной) или Owl Carousel вместо Slick или Fotorama (которые тоже очень круты, но увы).

Кстати, если уход с jQuery точно не планируется, то тогда я бы посоветовал хотя бы проверить совместимость библиотеки с Zepto. Когда деваться совсем некуда, я все равно стараюсь подменить jQ на неё, потому что весит в несколько раз меньше. И часть jQ-библиотек могут работать с Зепто из коробки или после небольшого напилинга. А вот ту же Фотораму мне не удалось заставить подружиться за разумное время.

[sim3x]

dom1n1k: добавь отдельным ответом свой вариант, плиз

[floydback]

Денис Инешин, подскажите пожалуйста, как сейчас лучше всего реализовать draggable элемент по оси X в пределах одного DIV. Визуально это вертикальная линия, поэтому range не подходит, но работать должно так же.

Может посоветуете хорошее готовое решение на js?

[Денис Инешин]

floydback, а что вам мешает использовать специльный скин для этого?
ionden.com/a/plugins/ion.rangeSlider/skins.html - в первом случае это тоже вертикальная линия.

А вообще:
1. Двигаем мышкой и записываем ее координаты
2. Передаем эти координаты в requestAnimationFrame
3. Меняем позицию свой полоски при изменении этих координат.

[floydback]

Денис Инешин, у меня waveform высоток 100px и два ползунока. Получится ли изменить этот скин так, чтобы вместо прогресбара был мой waveform?

[Денис Инешин]

floydback, никаких ограничений на размер элементов.

[Денис Инешин]

dom1n1k, избавление от jQuery уже в планах.