Knob

This widget displays a dial with a slider the user can move to change a parameter value.

Knob

When the slider is moved on the dial, the selected value is immediately sent to the remote product by updating the referenced configuration parameter.

This widget provides two different layouts you can use.

DASHED

SOLID

Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

Knob <knob-widget>
PROPERTIES
Color	The color used to render the widget elements. Type: STRING \| Optional \| Default: #3F51B5 [config]="{color: 'fooBar'}"
CSS Class	The name(s) of the CSS class used to customize the widget layout. Type: STRING \| Optional class="my-custom-class"
Default Value	The default value to use when displaying the widget. Type: INTEGER \| Optional [config]="{defaultValue: 123}"
Height	The height of the widget (e.g. 250px). Type: STRING \| Optional \| Default: 300px [config]="{height: '250px'}"
Layout	The dial layout, which can be: DASHED with a squared slider, SOLID with a circular slider. Type: ENUM \| Optional \| Values: DASHED SOLID [config]="{layout: 'SOLID'}"
Parameter	The configuration parameter whose value must be set. Type: CONFIGURATION_PARAMETER \| Required [config]="{parameter: 'CONFIGURATION_PARAMETER'}"
Ratain Last Value	The flag indicating whether the last value should be retained between navigations. Type: BOOLEAN \| Optional \| Values: true false [config]="{retainLastValue: true}"
Ticks	The number of ticks within the DASHED dial. Type: INTEGER \| Optional \| Default: 50 [config]="{ticks: 123}"
Title	The title displayed on the top part of the widget box. Type: STRING \| Optional [title]="'Details'"
Unit	The alternative unit of measurement to be displayed next to the value. Type: STRING \| Optional [config]="{unit: 'fooBar'}"
Visibility Condition	The expression that allows you to reduce the visibility of the element. Type: STRING \| Optional *ngIf="getUser().organizationId != null"