jqwidgets-scripts-custom/demos/Angular/bargauge/updatevalues/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxBarGauge #myBarGauge style="float: left"
    [width]='370' [height]='370' [relativeInnerRadius]='0.5' [max]="255"
    [values]='[187, 255, 170]' [startAngle]="0" [endAngle]="90" 
    [colorScheme]="'rgb'" [customColorScheme]="customColorScheme" 
    [title]="title" [labels]="{ precision: 0, indent: 10 }">
</jqxBarGauge>

<div style="float: left">

  <span style="font-style: italic;">Red</span>

  <jqxSlider [theme]="'material'" #redSlider (onChange)="redSliderOnChange()"
    [mode]="'fixed'" [min]="0" [max]="255"
    [ticksFrequency]="25.5" [value]="170" [step]="25.5">
  </jqxSlider>

  <span style="font-style: italic;">Green</span>

  <jqxSlider [theme]="'material'" #greenSlider (onChange)="greenSliderOnChange()"
    [mode]="'fixed'" [min]="0" [max]="255"
    [ticksFrequency]="25.5" [value]="255" [step]="25.5">
  </jqxSlider>

  <span style="font-style: italic;">Blue</span>

  <jqxSlider [theme]="'material'" #blueSlider (onChange)="blueSliderOnChange()"
    [mode]="'fixed'" [min]="0" [max]="255"
    [ticksFrequency]="25.5" [value]="187" [step]="25.5">
  </jqxSlider>

</div>