Html LinearGauge

Bind to the valueChanging event by type: jqxLinearGauge. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="gaugeContainer"></div>
<br/>
<input type="button" id="jqxbutton" value="Change the value" />
<br/>
<div id="log"></div>

JavaScript

$('#gaugeContainer').jqxLinearGauge({
    max: 70,
    min: 0,
    colorScheme: 'scheme02',
    ticksMajor: {
        size: '10%',
        interval: 10
    },
    ticksMinor: {
        size: '5%',
        interval: 2.5,
        style: {
            'stroke-width': 1,
            stroke: '#aaaaaa'
        }
    },
    ranges: [{
        startValue: 20,
        endValue: 45,
        style: {
            fill: '#FFA200',
            stroke: '#FFA200'
        }
    }, {
        startValue: 45,
        endValue: 70,
        style: {
            fill: '#FF4800',
            stroke: '#FF4800'
        }

    }]
});
$("#jqxbutton").jqxButton({
    theme: 'energyblue',
    width: 200,
    height: 30
});
$('#jqxbutton').click(function () {
    $('#gaugeContainer').jqxLinearGauge('value', 70);
});
$('#gaugeContainer').bind('valueChanging', function () {
    $("#log").html("The value is changing");
});