0

I am trying to use jQuery Knob for a thermostat UI. I would like to allow for the ability to control a range (heat - cool).

I've been able to achieve this look by stacking several knobs, however, this essentially disabled the clicking/dragging functionality.

Fiddle

Red cursor: Heat, Blue cursor: Cool, White cursor: current temp.

// Obligatory code for Fiddle link    
<input type="text" class="knob1" value="56">
approxiblue
  • 6,982
  • 16
  • 51
  • 59
PerfectPixel
  • 13
  • 4

1 Answers1

2

I tried to customize the appearance of jQuery knob, but as per the current behavior of knob we can't add additional handles with it.

Alternatively you can use the jQuery roundSlider plugin, which is very flexible to use so that we can add multiple handles with a single slider.

Check the exact demo for your requirement: jsFiddle

Screenshot of the Output:

thermostat UI like appearance using jquery round slider

Soundar
  • 2,569
  • 1
  • 16
  • 24
  • 2
    Are you kidding me? This is absolutely awesome. it never ceases to amaze me how kind some people are! I would mark this as the answer if I could. Thank you, kind stranger! – PerfectPixel Sep 27 '15 at 21:08