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

Пришла в голову моему дизайнеру вот такая штука:
9b3eba638aa040fd8bf284a635f3ebbb.jpg
Выбираете вы день в чекбоксе и появляется вот такая "шкала", для выбора времени занятий.

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

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

p.s.
Дизайнера нельзя поменять.
Дизайн утвержден.
Меня можно поменять, но пусть это будет между нами.
Гугл мне не помог.
  • Вопрос задан
  • 700 просмотров
Решения вопроса 2
Apathetic
@Apathetic
Frontend
noUiSlider
Не зависит от сторонних библиотек. Пользуюсь регулярно.
Ответ написан
copist
@copist
Empower people to give
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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы