Drawing a non-standard element or can be dispensed with (it is necessary to depict a “thermometer scale” for choosing the time)?

Question

css

My designer came up with the following thing:

You choose a day in the checkbox and such a "scale" appears for choosing the time of classes.

There were no problems ( that's what "no problems" looks like ) until I had to draw a blue line leading from one point to another.
It occurred to me , and I will calculate the height by the difference between the points. But I was afraid to blow up the Internet and decided to ask: is there a humane way? Some kind of tool, or a pure js way, perhaps? ps The designer cannot be changed. Design approved. I can be changed, but let it be between us. Google didn't help me. :after{background-image: url(...);}

Answer 1

noUiSlider
Does not depend on third-party libraries. I use regularly.