New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core Linear Gauge Multiple Pointers

Loading Demo...

EXAMPLE

VIEW SOURCE
EDIT IN
- Telerik REPL

Also available for:

CLIENT-SIDE API HTML HELPER API

window.demoComponentProperties = { sections: [ { label: 'Pointer values', controls: [ { type: 'slider', name: 'pointer0', label: 'Red pointer value', defaultValue: 10, min: 0, max: 180 }, { type: 'slider', name: 'pointer1', label: 'Orange pointer value', defaultValue: 70, min: 0, max: 180 }, { type: 'slider', name: 'pointer2', label: 'Yellow pointer value', defaultValue: 140, min: 0, max: 180 }, { type: 'button', label: 'Get all', onClick: function () { alert( 'All values: ' + $('#gauge') .getKendoLinearGauge() .allValues() .join(', ') ); } }, { type: 'textbox', name: 'newValues', label: 'Set all pointer values', defaultValue: '100, 10, 80' }, { type: 'button', label: 'Set all', onClick: function (values) { $('#gauge') .getKendoLinearGauge() .allValues( $.map( values.newValues.split(','), function (value) { return parseInt(value, 10); } ) ); } } ] } ], onChange: function (values) { var gauge = $('#gauge').getKendoLinearGauge(); if (gauge) { gauge.pointers[0].value(values.pointer0); gauge.pointers[1].value(values.pointer1); gauge.pointers[2].value(values.pointer2); } } };

Support & Learning Resources

Additional Resources