---
title: "Knob"
slug: "knob-widget"
updated: 2026-04-17T07:26:52Z
published: 2026-04-17T07:26:52Z
canonical: "learn.servitly.com/knob-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Knob

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

![Knob](https://components-manager.servitly.com/components/Knob_1/IMAGES/_screenshot?owner=AG_Servitly)

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**

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(527).png)

**SOLID**

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(528).png)

## Component Reference

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

#### Knob `<knob-widget>`

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

## Full Syntax Example

```xml

<knob-widget    
    [title]="'Knob'"
    [config]="{
        color: '#007BFF',
        unit: 'abc',
        parameter: 'paramName',
        retainLastValue: true,
        ticks: 123,
        defaultValue: 123,
        layout: 'DASHED',
        height: '250px'
    }"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']"></knob-widget>
```