Using jQuery Knob I want to toggleClass when value increases

Question

I am using the jQuery knob (http://anthonyterrien.com/knob/) and trying to trigger a 'toggleClass' event on a series of divs when the value of the dial is >=10, >=20, >=30 etc

Using this I can see the value in the console

$(".dial").knob({
    'change' : function (v) { console.log(v); }
});

But I want to know how - and where in the code - I can trigger the following when the value is >=10

$("#eq-1").toggleClass('active');

And then this when the value is >=20

$("#eq-2").toggleClass('active');

etc...

Am I right in assuming that using toggleClass means that the class is remove when the value falls below the breakpoints again ?

Thats right, the toggle class will check if the class exists on a certain condition or event. If it exists, it will be removed, if not, it will be added. You full code would be helpful, but it appears to be the right tool for your use case here — ptts, Feb 07 '19 at 12:09

score 1 · Accepted Answer · answered Feb 07 '19 at 12:09

The argument provided to the change event handler is the current value set in the knob control. As such you just need to provide a boolean to toggleClass() to determine whether the class should be added or removed. Try this:

$(".dial").knob({
  'change': function (v) { 
    $("#eq-1").toggleClass('active', v >= 10);
    $("#eq-2").toggleClass('active', v >= 20);
  }
});

Using jQuery Knob I want to toggleClass when value increases

1 Answers1