Pointers spin around before settling on value

[brycekirk]

I'm using a fairly small range; 60 to 80. When I put these in as max and min values, everything works well, except the pointers spin over 360 degrees before settling on the value (using two pointers from this issue: https://github.com/bernii/gauge.js/issues/193).

If I lower the min value to 0, the pointers animate correctly (ie they start at 0 and move to my values) but then it obviously messes up the look of the gauge.

My code:

var opts = {
  angle: -0.05,
  lineWidth: 0.2,
  radiusScale: 0.8,
  pointer: {
    length: 0.6, 
    strokeWidth: 0.025,
    color: '#eeeeee',
  },
  limitMax: false,  
  limitMin: false,
  strokeColor: '#E0E0E0',
  highDpiSupport: true,
  staticZones: [
   {strokeStyle: "#c52617", min: 60, max: 64},
   {strokeStyle: "#fed757", min: 64, max: 70},
   {strokeStyle: "#84ba23", min: 70, max: 76},
   {strokeStyle: "#51b4e4", min: 76, max: 80} 
    ],  
};
var target = document.getElementById('foo');
var gauge = new Gauge(target).setOptions(opts);

gauge.minValue = 60;
gauge.maxValue = 80; 

gauge.animationSpeed = 10;
gauge.set(62);
gauge.options.pointer.color = '#444444';
gauge.set([62, 71.2]);
gauge.options.pointer.color = '#444444';

gauge.setTextField(document.getElementById("text"));

[NicFragale]

@brycekirk I believe the answer might be in the way the value is set. You seem to be accessing the minValue by setting it directly. Try setting it by way of function "setMinValue(X)". Does that fix it for you?

[NicFragale]

By the by, there is only a setter for the MIN value, not MAX.

[brycekirk]

Strangely, when I went back to try your answer, I reloaded with my original code (using minValue) and it's working as expected now. So, weird, but great. Thanks for the reply!