Contineo Platform

Knob

A circular dial input component that provides an interactive way to select numeric values. Features customizable appearance including thickness, colors, value display options, icon integration, and precise control over minimum or maximum values. Supports both simple value selection and range-based input with inner and outer bounds.

Extends: fieldComponent

Fields

Name	Code	Data Type	Description
Size	`size`	text	Sets the overall size of the knob control
Thickness	`thickness`	text	Controls the thickness of the knob's outer ring
Color	`color`	text	Defines the color of the knob's active portion
Center Color	`centerColor`	text	Sets the color of the knob's center area
Track Color	`trackColor`	text	Defines the color of the knob's inactive track
Value Classes	`valueClass`	text	CSS classes to apply to the value display
Show Value	`showValue`	boolean	Controls whether the current value is displayed
Show Value Percentage	`showPercentage`	boolean	Toggles display of the value as a percentage
Font Size	`fontSize`	text	Sets the size of the displayed value text
Show Icon with Value	`showIconWithValue`	boolean	Controls whether an icon is shown alongside the value
Icon	`icon`	text	Specifies the icon to display
Show Icon after Value	`showIconAfterValue`	boolean	Determines if the icon appears after the value
Image URL	`imageLink`	text	URL for an image to display in the knob's center
Avatar Size	`avatarSize`	text	Size of the avatar image when imageLink is used
Minimum Value	`minValue`	text	Minimum value that can be selected
Maximum Value	`maxValue`	text	Maximum value that can be selected
Inner Minimum Value	`innerMin`	text	Minimum value for the inner range
Inner Maximum Value	`innerMax`	text	Maximum value for the inner range
Angle	`angle`	text	The angle of rotation for the knob
Step	`step`	text	The increment value for each step of rotation
Label	`label`	multi-locale	Display label for the knob
ID	`resourceId`	text	Unique identifier for the component
Style Classes	`styleClasses`	text	CSS classes for styling
Style	`style`	text	Custom inline styles
Width	`widthClass`	text	Controls component width
Value	`value`	text	Current value of the knob
Visible	`isVisible`	boolean	Controls component visibility
Enabled	`enabled`	boolean	Controls whether component is enabled
Field Style	`fieldStyle`	text	Additional field styling options

Methods

Name	Description
`fromValue`	Converts the input value to the knob's internal value representation
`toValue`	Converts the knob's internal value to the output value format

Events

Name	Description
`onChange`	Triggered when the knob value changes
`onBlur`	Triggered when the knob loses focus
`onFocus`	Triggered when the knob gains focus