1

I have a collection of jQuery knobs on my page that represent percentages. Each knob can have a value from 0-100, however, each subsequent knob should not have a value less than the previous knob. Essentially I want to make part of the knob read only - to prevent the user from dragging the value below the previous knob's value - similar to a 'min' value.

Example

  • Knob 1 25%
  • Knob 2 50% (min value still 0, max 100, but the value has to be greater than 25)
  • Knob 3 75%
  • Knob 4 100%

I have tried binding to the 'change' event on the knob, but that is not giving me what I want. Below I'm binding to the change event to try to limit the value - this is hard coded to test the simple use case. I am probably going to want to bind to the 'draw' event to limit the values on animation but haven't got that far.

        $(this).trigger('configure', {
        'change': function (v) {
            console.log("Updating value " + v);
            if(v < 25) {
              console.log("Updating value");
              this.cv = 25;
            }
        }
    });

enter image description here

Jared Knipp
  • 5,880
  • 7
  • 44
  • 52
  • What have you tried? can you share your code so we can have an idea on where to add the missing pieces? - initial thought is to set the `data-max` and `data-min` values after an 'on change' event (like you suggested) but it's hard to tell the specifics of why your code is not working without looking at your code :) – blurfus May 27 '14 at 16:57
  • @blurfus - the problem with data-max and data-min (min/max) is that it recalibrates the knob such that if you have a min as 25 then the knob is from 25 - 100, I need 0-100, just restricted so you can't select less than 25% – Jared Knipp May 27 '14 at 17:13
  • That's a tough one... I have not been able to find a practical solution. The best I can think of is to implement a validate() function or similar but the validation checks are basically the same you are doing on your 'on change' event. Sorry, I have no additional help ATM – blurfus May 27 '14 at 22:46

1 Answers1

1

Not sure if this is the best way to do it, but you can manipulate the angleOffset and angleArc options of the dial based on the value of the previous one. For example, if you have two dials:

HTML

<input type="text" value="75" id="dial1">
<input type="text" value="75" id="dial2">

Your javascript would be something like this:

$(function () {
    $("#dial1").knob({
            'change': function (v) {
            $('#dial2')
                .trigger(
                'configure', {
                    'angleOffset': (v / 100 * 360),
                    'angleArc': ((100-v) / 100 * 360),
                    'min': v,
            });
        }
    });
    $("#dial2").knob();
});

As for the empty space left in the dial, you can fix that by setting the canvas background to an image of a full knob.

CSS

canvas {
    background: url('http://imgur.com/aeTBhL9.png');
}

Here's a jsFiddle example.

Sadiq
  • 2,249
  • 2
  • 24
  • 32