组件/表单组件

ERangeSlider 范围滑块

import EUI 1.0

示例与代码

范围滑块

QML 代码QML

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"}) } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

范围滑块

QML 代码QML

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 }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

colorcolor

自定义颜色；透明值通常表示使用当前主题或语义配色。

默认值动态绑定

enabledbool

是否允许交互；false 时控件禁用。

默认值true

first.valuereal

第一个滑块的当前值。

默认值0

formatTooltipvar

滑块提示格式化函数，接收数值并返回文字。

默认值null

fromreal

滑块范围下限。

默认值0

handleSizeint

图标、选项或交互部件的尺寸，单位为像素。

默认值动态绑定

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

marksvar

滑块标记对象，键为数值，值为文字或含 label、style 的对象。

数值键映射到文字或对象
对象字段：label

默认值({})

orientationenum

组件的排列方向。

Qt.Horizontal
Qt.Vertical

默认值Qt.Horizontal

second.valuereal

第二个滑块的当前值。

默认值1

showStopsbool

显示离散步长的停靠点。

默认值false

showTooltipbool

显示当前滑块值的提示。

默认值true

sizeint

控件尺寸；默认继承最近的 EConfigProvider。

EStyle.Small
EStyle.Medium
EStyle.Large

默认值继承 Provider，默认 EStyle.Medium

stepvar

增量步长；滑块可覆盖 stepSize，时间下拉使用分钟数或 HH:mm。

undefined：使用 stepSize
正数 / "mark"（按标记）

默认值undefined

stepSizereal

滑块原生步长；0 为连续值，可由 step 覆盖。

默认值0

styleTypeint

语义配色风格。

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

默认值EStyle.Primary

toreal

滑块范围上限。

默认值1

trackSizeint

图标、选项或交互部件的尺寸，单位为像素。

默认值动态绑定

validateEventbool

值变化时是否向所属表单派发校验请求。

默认值true

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

markValuesvar只读

滑块实际显示的标记值或步进停靠值数组。

默认值由运行时计算

stopValuesvar只读

滑块实际显示的标记值或步进停靠值数组。

默认值由运行时计算