# jQueryKnob

The [jQueryKnob ](http://anthonyterrien.com/demo/knob/)extension component uses the amazing jQueryKnob widget to create a Wisej.NET Real Time dial control that allows the user to rotate the dial to change its value or to type the value in the middle editor. The component allows you to set the value, range, line style, colors and more.

![](https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFp7MR1wemvcC5891_r%2F-MWy2nObqEtggj-coyKA%2F-MWy59H1b0Z-81RW4jau%2Fimage.png?alt=media\&token=c15cc9ee-c548-4714-8384-a3d1f3fd8630)

{% embed url="<https://github.com/iceteagroup/wisej-extensions/tree/master/Wisej.Web.Ext.jQueryKnob>" %}
jQueryKnob Source Code
{% endembed %}

## Code Example

```csharp
Wisej.Web.Ext.jQueryKnob.Knob knob = new Wisej.Web.Ext.jQueryKnob.Knob();
knob.MinValue = 10;
knob.MaxValue = 20;
knob.Value = 15;
knob.KnobType = Wisej.Web.Ext.jQueryKnob.KnobType.Gauge;
knob.LineCapStyle = Wisej.Web.Ext.jQueryKnob.LineCapType.Butt;
this.Controls.Add(knob);
```

This code snippet creates a knob that looks like this:

<figure><img src="https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MFp7MR1wemvcC5891_r%2Fuploads%2Fyi8ntTILG2eYQKZwT3PY%2Fknob.png?alt=media&#x26;token=bc69dcd3-041d-47d2-9ac7-3f8212f87bd0" alt=""><figcaption></figcaption></figure>

MinValue and MaxValue do exactly what you'd expect: they set the minimum and maximum value of the knob. Value sets the value on the knob. Because 15 is halfway between 10 and 20, the circle is half completed. KnobType of Gauge has the circle fill from the start to the Value. (The other option for KnobType is Cursor which has a smaller portion of the circle filled that moves towards the end of the circle as the value increases). LineCapStyle of Butt has a flat end. (The other option, Round, has a semicircular end).

## How to Use

The **jQueryKnob** extension can be added to a Wisej.NET project using NuGet Package Manager.

{% embed url="<https://www.nuget.org/packages/Wisej-3-jQueryKnob>" %}

You can define *Step*, [*MinValue* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.jqueryknob.knob#minvalue)and [*MaxValue* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.jqueryknob.knob#maxvalue)and [*ShowInput* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.jqueryknob.knob#showinput)to configure the jQueryKnob.\
Set up the type with [*KnobType* ](https://docs.wisej.com/extensions/extensions/jqueryknob/api/wisej.web.ext.jqueryknob.knobtype)and the skin with [*LineCapStyle*](https://docs.wisej.com/extensions/extensions/jqueryknob/api/wisej.web.ext.jqueryknob.linecaptype).

{% hint style="info" %}
Find more information in our JSWidgets example in [C#](https://github.com/iceteagroup/wisej-examples/tree/master/JSWidgets) or in[ VB.NET](https://github.com/iceteagroup/wisej-examples-vb/tree/main/JSWidgets).
{% endhint %}