Components/Form componentsIntroduced in 1.3.0

EKnob Knob

import EUI 1.0

Examples

Value knob

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EKnob { value: 65 }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Step and range

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EKnob { to: 20 from: -20 value: 10 stepSize: 5 }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Percentage

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EKnob { value: 40 suffix: "%" }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Color and stroke

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EKnob { value: 75 strokeWidth: 16 color: "#67c23a" }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Read only

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EKnob { value: 80 readOnly: true }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

fromreal

One endpoint of the knob range.

Default0

toreal

Other endpoint of the knob range.

Default100

valuereal

Current knob value.

Default0

stepSizereal

Interaction increment; non-positive values use 1.

Default1

suffixstring

Text displayed after the value.

Default""

strokeWidthint

Stroke width of the circular track and value arc.

Default10

readOnlybool

Keep content visible and prevent edits.

Defaultfalse

colorcolor

Color of the value arc.

DefaultEPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)

maximumrealRead only

Larger of from and to.

DefaultMath.max(from, to)

minimumrealRead only

Smaller of from and to.

DefaultMath.min(from, to)

effectiveValuerealRead only

Displayed value clamped to the valid range.

DefaultisFinite(value) ? Math.max(minimum, Math.min(maximum, value)) : minimum

Signals

SignaturePurpose

moved(real value)

Emitted when the user moves the knob; value is its current value.

Methods

SignaturePurpose

setValue(next)

Set a new numeric value within the component limits.