Using Gauges as Input

Wijmo gauges can be used as value editors. The editing features are controlled by these properties:

• isReadOnly: Whether users can change the gauge value.
• step: The step to use then changing the gauge value.
• isAnimated: Whether to use animations to display value changes.

If you set the gauge's isReadOnly property to false, then users will be able to edit the value by clicking on the gauge.

Example:

import * as gauge from '@mescius/wijmo.gauge';

var myLinearGauge = new gauge.LinearGauge('#myLinearGauge', {
    value: 75,
    step: 5,
    isAnimated: true,
    isReadOnly: false
});

Value Changed Event

Listen to when the value changes using the valueChanged event.

import * as gauge from '@mescius/wijmo.gauge';

var myLinearGauge = new gauge.LinearGauge('#myLinearGauge', {
    min: 0,
    max: 100,
    value: 75,
    isReadOnly: false,
    // update when value changed
    valueChanged: function(s, e) {
      valueCtl.value = s.value;
    }
});