Рисование нестандартного элемента или можно обойтись (необходимо изобразить «шкалу термометра» для выбора времени)?

Question

[Абра Кадабра]

Пришла в голову моему дизайнеру вот такая штука:

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

Проблем не возникало (вот так выглядит "проблем не возникало"), пока не пришлось нарисовать синюю линию, ведущую от одной точки к другой.
Мне приходили в голову :after{background-image: url(...);} , а высоту буду вычислять по разнице между точками.

Но я побоялся взорвать интернет и решил спросить:
есть ли гуманный способ ? Какой-то тул, или способ на чистом js, возможно ?

p.s.
Дизайнера нельзя поменять.
Дизайн утвержден.
Меня можно поменять, но пусть это будет между нами.
Гугл мне не помог.

Answer 1

[Дмитрий Королёв]

noUiSlider
Не зависит от сторонних библиотек. Пользуюсь регулярно.

Comments

[Абра Кадабра]

Выглядит зашибись. Спасибо!

Answer 2

[Павел Волынцев]

1. Как бы не сделал, лишь бы выглядело как задумано
2. Я бы весь этот градусник сделал на SVG
3. На указанном pen codepen.io/anon/pen/ojevRd горячая зона у точек мелкая, приходится слишком точно прицеливаться в градусник. Надо побольше.
4. А как должно выглядеть, если кликнуть 8am, 10am, 8pm, 10pm? Два один диапазон (с 8am до 10pm), два (c 8am до 10am + c 8 pm до 10pm)?

P.S. Чуть чуть магии и SVG codepen.io/copist/pen/jbLbGV

Comments

[Абра Кадабра]

Павел Волынцев
2. но вышла бы чисто картинка с анимашкой ? А как бы вы сделали кликабельные области ?
Расположили бы их поверх картинки ?

3. На указанном pen codepen.io/anon/pen/ojevRd горячая зона у точек мелкая, приходится слишком точно прицеливаться в градусник. Надо побольше.
---
Тут вы правы, но дизанер ..... Я сам начинающий только, меня не слушают.

4. А как должно выглядеть, если кликнуть 8am, 10am, 8pm, 10pm? Два один диапазон (с 8am до 10pm), два (c 8am до 10am + c 8 pm до 10pm)?
----
Это я уберу, когда сделаю валидацию всей формы. Будет только 1 диапазон.

[Павел Волынцев]

Андрей Петров: расширения горячей зоны: внутренний отступ ссылок

[Абра Кадабра]

Павел Волынцев:
2. Я бы весь этот градусник сделал на SVG
---
По этому поводу вы не ответили. На :
"но вышла бы чисто картинка с анимашкой ? А как бы вы сделали кликабельные области ?
Расположили бы их поверх картинки ?"

[Павел Волынцев]

Андрей Петров: да, как-то так: codepen.io/copist/pen/jbLbGV
Более точно нарисовать времени не нашлось, извиняюсь

[Абра Кадабра]

Павел Волынцев:
Обалдеть просто!!
Спасибо вам огромное!
Я бы 10 лайков поставил, но можно только 1.

[Павел Волынцев]

Андрей Петров: но полосочки я всё таки не сделал. надо?

[Павел Волынцев]

Андрей Петров: Готово, можно пользоваться

[Абра Кадабра]

Павел Волынцев:
Нифига себе.
У вас и вправду 15 лет опыта :)

[Абра Кадабра]

Павел Волынцев: Спасибо огромное!