Flat-style Qml range slider

Revisions based Qml of RangeSlider control.

Range slider Code

import QtQuick 2.5
import QtQuick.Controls 2.0

RangeSlider {
    id: root

    property color checkedColor: "#3498DB"

    first.value: 0.25
    second.value: 0.75

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

        Rectangle {
            x: root.first.visualPosition * parent.width
            width: root.second.visualPosition * parent.width - x
            height: parent.height
            color: root.checkedColor
            radius: height / 2
        }
    }

    first.handle: Rectangle {
        x: root.leftPadding + first.visualPosition * (root.availableWidth - width)
        y: root.topPadding + root.availableHeight / 2 - height / 2
        implicitWidth: root.background.implicitHeight + 6
        implicitHeight: implicitWidth
        radius: implicitWidth / 2
        color: first.pressed ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
        border.color: Qt.darker(root.checkedColor, 0.93)
    }

    second.handle: Rectangle {
        x: root.leftPadding + second.visualPosition * (root.availableWidth - width)
        y: root.topPadding + root.availableHeight / 2 - height / 2
        implicitWidth: root.background.implicitHeight + 6
        implicitHeight: implicitWidth
        radius: implicitWidth / 2
        color: second.pressed ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
        border.color: Qt.darker(root.checkedColor, 0.93)
    }
}

Range slider style code

GridLayout {
    width: root.width
    rows: 3
    columns: 3

    Repeater {
        model: ["#727CF5", "#0ACF97", "#F9375E",
                "#FFBC00", "#2B99B9", "#5A6268",
                "#EEF2F7", "#212730", "#3498DB"]

        RangeSlider {
            checkedColor: modelData
        }
    }
}

• More exciting content please pay attention to the public No. Qt Jun .