1

I am building a gauge/knob for a climate control UI. I would like to show the current temperature, and allow the user to drag/click to a new value, while keeping the current (old) value visible. I've googled this for days and can't seem to find a slider that does this.

Here is my fiddle for the knob, with displayPrevious set to true. However, when you drag to the new value/position on the knob, I would like the old position to remain visible. This to demonstrate current temperature, and the new, desired temperature on the same knob.

Is this possible?

http://jsfiddle.net/2tk9fpjx/

$(".dial").knob({
    'width':            300,
    'height':           400,
    'min':              40,
    'max':              100,
    'angleOffset':      -125,
    'angleArc':         250,
    'displayPrevious':  'true'
});

Any, and all help with pointing me in the right direction is much appreciated.

PerfectPixel
  • 13
  • 4
  • The old value seems to remain while dragging... Do you mean that you want the old value to remain even after dragging *and releasing* the mouse? – showdev Feb 05 '15 at 23:38
  • 1
    The current value/position disappears when you release the mouse at the new value/position. I would like for them both to remain visible, even after releasing the mouse. – PerfectPixel Feb 05 '15 at 23:40
  • I found that commenting out line 530 (`this._draw();`) from [`jquery.knob.js`](https://github.com/aterrien/jQuery-Knob/blob/master/js/jquery.knob.js) prevents the dial from being "redrawn" after releasing the mouse. However, I have not studied the code in depth and this should be considered a HACK. [Working Example](http://jsfiddle.net/p2s85r1v/). – showdev Feb 05 '15 at 23:52
  • Thanks for helping by the way. Your working example is almost what I need, however the current (first) value changes when dragging and releasing a second time, which isn't desired. The first value needs to be persistent. – PerfectPixel Feb 05 '15 at 23:57
  • Commenting out lines 528 - 530 has that effect. [Example here](http://jsfiddle.net/p2s85r1v/1/). Again, can't guarantee that doing this doesn't destroy some other (possibly vital) functionality because I haven't studied the code in any depth. Seems to work okay at a glance. – showdev Feb 06 '15 at 00:04
  • Thanks @showdev, this is close enough. It breaks the input field for setting values, but I am planning on disabling the input field anyway, as well as the mousewheel (didn't want it anyway). I'm planning on using the hooks for returning/display the values elsewhere anyway. Again, thanks! – PerfectPixel Feb 06 '15 at 00:20

0 Answers0