Qt Quick入門教程(9) : QML雙向滑動控件RangeSlider

       例以下面的控件能夠雙向滑動，該控件在QML中叫RangeSlider

       demo代碼以下：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

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

    RangeSlider {
          id:ranSlider
          x:40
          from: 1
          to: 100
          first.value: 25
          second.value: 75

          //獲取左端移動時的值
          first.onMoved: {
                tex1.text = first.value
          }

          //獲取右端移動時的值
          second.onMoved: {
                tex2.text = second.value
          }
    }

    Label{
        id:l1
        anchors.top: ranSlider.bottom
        anchors.topMargin: 15
        anchors.left: ranSlider.left

        text: "左端值"
        font.pixelSize: 22
    }

    TextField{
        id:tex1
        anchors.left: l1.right
        anchors.leftMargin: 5
        anchors.top: l1.top
    }

    Label{
        id:l2
        anchors.top: l1.bottom
        anchors.topMargin: 35
        anchors.left: l1.left

        text: "右端值"
        font.pixelSize: 22
    }

    TextField{
        id:tex2
        anchors.left: l2.right
        anchors.leftMargin: 5
        anchors.top: l2.top
    }
}

        運行界面

        兩端在滑動時，編輯框中能夠顯示值得變化。