Sets or gets the allowValueChangeOnClick property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob allow-value-change-on-click="true"></jqx-knob>

Sets or gets the allowValueChangeOnDrag property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob allow-value-change-on-drag="true"></jqx-knob>

Sets or gets the allowValueChangeOnMouseWheel property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob ></jqx-knob>

Sets or gets the changing property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob changing="changing"></jqx-knob>

Sets or gets the dragEndAngle property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob drag-end-angle="420"></jqx-knob>

Sets or gets the dragStartAngle property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob drag-start-angle="120"></jqx-knob>

Sets or gets the disabled property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob disabled="true"></jqx-knob>

Sets or gets the dial property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob dial="dial"></jqx-knob>

Sets or gets the endAngle property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob end-angle="420"></jqx-knob>

Sets or gets the height property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob height="400"></jqx-knob>

Sets or gets the labels property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob labels="labels"></jqx-knob>

Sets or gets the marks property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob marks="marks"></jqx-knob>

Sets or gets the min property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob min="min"></jqx-knob>

Sets or gets the max property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob max="150"></jqx-knob>

Sets or gets the progressBar property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob progress-bar="progressBar"></jqx-knob>

Sets or gets the pointer property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob pointer="pointer"></jqx-knob>

Sets or gets the pointerGrabAction property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob pointer-grab-action="normal"></jqx-knob>

Sets or gets the rotation property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob rotation="counterclockwise"></jqx-knob>

Sets or gets the startAngle property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob start-angle="120"></jqx-knob>

Sets or gets the spinner property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob spinner="spinner"></jqx-knob>

Sets or gets the style property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob style='{ stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }'></jqx-knob>

Sets or gets the step property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob step="10"></jqx-knob>

Sets or gets the snapToStep property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob snap-to-step="false"></jqx-knob>

Sets or gets the value property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob value="60"></jqx-knob>

Sets or gets the width property.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob width="500"></jqx-knob>

Code examples

Bind to the change event of jqxKnob.

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob min="0" max="100" value="60" start-angle="120" end-angle="420" on-change="eventHandler()"></jqx-knob>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob instance="getInstance()"></jqx-knob>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["destroy"]();									
	}									
</script>									
}

<script src="~/jqwidgets/jqxknob.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Knob Example";
    KnobMarks marks = new KnobMarks()
    {
        ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" },
        ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" },
        Type = "line",
        Offset = "71%",
        Thickness = 3,
        Size = "6%",
        MajorSize = "9%",
        MajorInterval = 10,
        MinorInterval = 2
    };
    KnobStyle style = new KnobStyle()
    {
        Stroke = "#dfe3e9",
        StrokeWidth = 3,
        Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { '[0, 1]', '[50, 0.9]', '[100, 1]' } }
    };
    KnobLabels labels = new KnobLabels()
    {
        Offset = "88%",
        Step = 10
    };
    KnobProgressBar progressBar = new KnobProgressBar()
    {
        Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" },
        Size = "9%",
        Offset = "60%",
        Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" }
    };
    KnobDial dial = new KnobDial()
    {
        StartAngle = 120,
        EndAngle = 420,
        InnerRadius = "10%",
        OuterRadius = "20%"
    };
}
<jqx-knob instance="getInstance()"></jqx-knob>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		var result = instance["val"]();									
	}									
</script>									
}