QML入门教程(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
    }
}

        运行界面

        两端在滑动时，编辑框中可以显示值得变化。