JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jsgauge - Simple jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://jsgauge.googlecode.com/svn/trunk/src/gauge.js"></script>
<script type="text/javascript" src="http://jsgauge.googlecode.com/svn/trunk/src/jquery.gauge.js"></script>
</head>
<body>
<canvas id="example" width="450" height="450"></canvas>
<script type="text/javascript">
Gauge.prototype.setValue = function( value ) {
var that = this,
pointerValue = (value > that.settings.max) ?
that.settings.max : // Nomalize to max value
(value < that.settings.min) ? that.settings.min : value,
increment = Math.max(Math.abs( that.settings.pointerValue - pointerValue ) / 80, 1);
if (that.animationToken !== null) {
//try {
if (that.cancelRequestAnimFrame){
if (that.cancelRequestAnimFrame.arguments != null) {
that.cancelRequestAnimFrame(that.animationToken);
}
} else {
clearTimeout(that.animationToken);
}
//} catch (e){}
that.animationToken = null;
}
function adjustValue() {
var span;
if ( that.settings.pointerValue < pointerValue ) {
that.settings.pointerValue += increment;
if ( that.settings.pointerValue + increment >= pointerValue ) {
that.settings.pointerValue = pointerValue;
}
} else {
that.settings.pointerValue -= increment;
if ( that.settings.pointerValue - increment <= pointerValue ) {
that.settings.pointerValue = pointerValue;
}
}
span =...