Components/Form components

ERangeSlider Range slider

import EUI 1.0

Examples

Range 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 ERangeSlider { from: 0 to: 100 stepSize: 10 showStops: true first.value: 20 second.value: 80 marks: ({0: "0", 50: "50", 100: "100"}) } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Range slider

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ERangeSlider { from: 0 to: 100 stepSize: 5 first.value: 20 second.value: 70 }

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

first.valuereal

Current value of the first handle.

Default0

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

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

second.valuereal

Current value of the second handle.

Default1

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

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