Components/Form components

ESlider Slider

import EUI 1.0

Examples

Slider

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 ESlider { from: 0 to: 100 value: 50 stepSize: 25 showStops: true showInput: true marks: ({0: "0%", 25: "25%", 50: "50%", 75: "75%", 100: "100%"}) formatTooltip: function(value) { return value + "%" } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Slider

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 width: parent.width ESlider { value: 30 width: Math.min(parent.width, 520) } ESlider { to: 10 from: 0 value: 6 stepSize: 1 styleType: EStyle.Success width: Math.min(parent.width, 520) color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Success) } ESlider { from: 0 to: 100 value: 45 stepSize: 5 trackSize: 8 handleSize: 24 size: EStyle.Large styleType: EStyle.Primary orientation: Qt.Horizontal width: Math.min(parent.width, 520) color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) } }

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

colorcolor

Custom color; a transparent value usually selects theme or semantic colors.

DefaultDynamic binding

enabledbool

Allow interaction; false disables the control.

Defaulttrue

formatTooltipvar

Slider tooltip formatter receiving a value and returning text.

Defaultnull

fromreal

Lower slider bound.

Default0

handleSizeint

Size of the icon, option or interactive part in pixels.

DefaultDynamic binding

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

inputPrecisionint

Number of decimal places.

DefaultDynamic binding

marksvar

Slider marks keyed by value, with text or objects containing label and style.

Numeric keys map to text or objects
Object fields: label

Default({})

orientationenum

Component layout direction.

Qt.Horizontal
Qt.Vertical

DefaultQt.Horizontal

showInputbool

Show numeric input or the message-box input area.

Defaultfalse

showInputControlsbool

Show increment and decrement buttons in slider numeric input.

Defaulttrue

showStopsbool

Show discrete step stops.

Defaultfalse

showTooltipbool

Show a tooltip for the slider value.

Defaulttrue

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

stepvar

Increment step; sliders may override stepSize, while time-select uses minutes or HH:mm.

undefined: use stepSize
Positive number / "mark" (snap to marks)

Defaultundefined

stepSizereal

Native slider step; 0 allows continuous values and step may override it.

Default0

styleTypeint

Semantic color style.

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

DefaultEStyle.Primary

toreal

Upper slider bound.

Default1

trackSizeint

Size of the icon, option or interactive part in pixels.

DefaultDynamic binding

validateEventbool

Request enclosing-form validation when the value changes.

Defaulttrue

valuereal

Current value; read or write through property bindings, with arrays for multiple or range selection.

Number between from and to

Default0

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

markValuesvarRead only

Values of rendered slider marks or step stops.

DefaultComputed at runtime

stopValuesvarRead only

Values of rendered slider marks or step stops.

DefaultComputed at runtime