I want create component rangSlider with 3 handler , with 2 of handler I can set the range and with one set amount . Actually, I want the combination of rangSlider and slider together Does anyone have an idea?

CodePudding user response：

I assume that this is what the OP wanted:

This is the code:

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    anchors.fill: parent;
    color: "grey"
    DropArea {
        id: drop_area
        anchors.fill: parent;
        Text {
            anchors.top: rs.bottom
            anchors.left: rs.left;
            text: "From: "   rs.first   " To: "   rs.second
        }

        Rectangle {
            id: rs;
            property real amount: amount_handler.y;
            property real first: btn_from.x * amount;
            property real second: btn_to.x * amount;
            height: 50;
            width: 500;
            anchors.verticalCenter: amount_handler.verticalCenter;
            anchors.horizontalCenter: parent.horizontalCenter;
            Button {
                id: btn_from;
                width: parent.width / 15; height: parent.height;
                anchors.verticalCenter: parent.verticalCenter;

                icon.source: "https://img.icons8.com/fluency/344/left.png"
                MouseArea {
                    anchors.fill: parent;
                    drag.target: parent;
                    drag.minimumX : drop_area.x
                    drag.maximumX: btn_to.x - btn_to.width
                }
            }
            Rectangle {
                color: "green"
                height: parent.height;
                anchors.left: btn_from.right;
                anchors.right: btn_to.left;
            }
            Button {
                id: btn_to;
                Component.onCompleted: {
                    x = btn_from.x   btn_from.width
                }
                width: parent.width / 15; height: parent.height;
                icon.source: "https://img.icons8.com/fluency/344/right.png"
                anchors.verticalCenter: parent.verticalCenter;
                MouseArea {
                    anchors.fill: parent;
                    drag.target: parent;
                    drag.minimumX : btn_from.x   btn_to.width
                    drag.maximumX: rs.width - width
                }
            }
        }
        Button {
            id: amount_handler;
            width: 50; height: 50;
            icon.source: "https://img.icons8.com/fluency/344/drag-reorder.png"
            anchors.left: rs.right;
            Drag.active: dragArea.drag.active
            Drag.hotSpot.x: 10
            Drag.hotSpot.y: 10
            MouseArea {
                id: dragArea;
                anchors.fill: parent;

                drag.target: parent;
            }
        }
    }
}

You could have used it With Slider and RangeSlider from QtQuick.Controls but I have found it rather buggy. Also this is more customizable.

Notes:

• The use of Button here is just for the icon and you can use something else.
• The implementation above is not trying to make good code. It is more of a POC.