CODEWITHSUNDEEP
jqueryhtmlhtml5-canvas
CherryQu
CherryQu

Reputation: 3393

How to make a scrollbar with html5 canvas and perhaps JQuery Tools?

I am trying to make a web thermometer like this (this is a drawing of my idea)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.

Upvotes: 2

Views: 1125

Answers (2)

Billybonks
Billybonks

Reputation: 1568

a little bit of sudo code

onmouseclick(target = thermomoterGrippie) { this.grippie = active }

onmousemove(event) {

}

once you can change the size of the RED. then you can make a little algorithym that calculates the tempreture depending on the red size

Upvotes: 0

arrest warrant
arrest warrant

Reputation: 354

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

Upvotes: 1

Related Questions