Question

I am trying to make a web thermometer like this (this is a drawing of my idea)

I was able to draw the body of the thermometer with Html5 canvas, but it’s all static – I cannot interact with it. I need two text boxes that are editable, more importantly I need a scrollbar-like control in the center so that when the user drag it, the numbers in the text boxes will change.

What would be the simplest way to do that?

I know that JQuery Tools offers ready-made range inputs, which is quite similar to what I need because those range inputs come with text boxes. But is this the right way to go? I tried with the Jquery Tools range input but failed to incorporate it with my canvas. Moreover, I don’t know whether it would be possible to add an extra text box to the range input.

Answer 1

you can change the css of the plugin you mentioned and make it visible exactly you have in the above pic..