QML控件类型：RangeSlider

一、描述

RangeSlider 是有两个滑块的滑动条，拖动两个滑块可以确定值范围。

二、属性成员

1、first group

第一个滑块的属性。

• first.handle : Item：第一个滑块项。
• first.hovered : bool：第一个滑块是否悬停。
• first.implicitHandleHeight : real：第一个滑块的隐式高度。
• first.implicitHandleWidth : real：第一个滑块的隐式宽度。
• first.position : real：逻辑位置。
• first.pressed : bool：第一个滑块是否被触摸、鼠标或按键按下。
• first.value : real：当前值。
• first.visualPosition : real：视觉位置，范围为 0.0 - 1.0。当控件被镜像时，该值等于 1.0 - first.position

      second group

第二个滑块的属性。

• second.handle : Item
• second.hovered : bool
• second.implicitHandleHeight : real
• second.implicitHandleWidth : real
• second.position : real
• second.pressed : bool
• second.value : real
• second.visualPosition : real

2、from : real

范围的起始值。 默认为 0.0。

      to : real

范围的结束值。 默认为 1.0。

3、[read-only] horizontal : bool

滑动条是否水平。

      [read-only] vertical : bool

滑动条是否垂直。

      orientation : enumeration

方向。

• Qt.Horizontal：（默认）
• Qt.Vertical 

4、live : bool

是否在拖动相应的滑块时为 first.value 和 second.value 属性提供实时更新。默认为 true。

5、snapMode : enumeration

对齐模式。对齐模式确定滑块相对于 stepSize 的行为方式。

• RangeSlider.NoSnap：不对齐（默认）。
• RangeSlider.SnapAlways：拖动滑块时对齐。
• RangeSlider.SnapOnRelease：在拖动时不会对齐，只有在滑块释放后才会对齐。

6、stepSize : real

步长。

7、touchDragThreshold : qreal

将启动触摸拖动事件的阈值（以逻辑像素为单位）。 鼠标拖动阈值不会受到影响。默认值为 Qt.styleHints.startDragDistance。

三、信号成员

1、void first.moved()

      void second.moved()

当用户通过触摸、鼠标或按键交互移动第一个或第二个滑块时，将发出此信号。

四、成员函数

1、void first.decrease() / void second.decrease()

滑块的值减少 stepSize，如果未定义 stepSize，则减少 0.1。

      void first.increase() / void second.increase()

滑块的值增加 stepSize，如果未定义 stepSize，则增加 0.1。

2、void setValues(real firstValue, real secondValue)

设置 first.value 和 second.value。

如果 to 大于 from 且 firstValue 大于 secondValue，则 firstValue 将被限制为 secondValue。

如果 from 大于 to 且 secondValue 大于 firstValue，则 secondValue 将被限定为 firstValue。

3、real valueAt(real position)

返回给定位置的值。

五、自定义 RangeSlider 示例

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    RangeSlider {
        id: control
        first.value: 0.25
        second.value: 0.75

        background: Rectangle {
            x: control.leftPadding
            y: control.topPadding + control.availableHeight / 2 - height / 2
            implicitWidth: 200
            implicitHeight: 4
            width: control.availableWidth
            height: implicitHeight
            radius: 2
            color: "#bdbebf"

            Rectangle {
                x: control.first.visualPosition * parent.width
                width: control.second.visualPosition * parent.width - x
                height: parent.height
                color: "#21be2b"
                radius: 2
            }
        }

        first.handle: Rectangle {
            x: control.leftPadding + control.first.visualPosition * (control.availableWidth - width)
            y: control.topPadding + control.availableHeight / 2 - height / 2
            implicitWidth: 26
            implicitHeight: 26
            radius: 13
            color: control.first.pressed ? "#f0f0f0" : "#f6f6f6"
            border.color: "#bdbebf"
        }

        second.handle: Rectangle {
            x: control.leftPadding + control.second.visualPosition * (control.availableWidth - width)
            y: control.topPadding + control.availableHeight / 2 - height / 2
            implicitWidth: 26
            implicitHeight: 26
            radius: 13
            color: control.second.pressed ? "#f0f0f0" : "#f6f6f6"
            border.color: "#bdbebf"
        }
    }
}