QML Custom Slider

Slider.qml File

    
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0


RangeSlider {
    id: control
    first.value: 0.25
    second.value: 0.75
    anchors {
        fill: parent
        centerIn: parent
    }
    property color checkedColor: "#3498DB"
    
    background: Rectangle {
        x: control.leftPadding
        y: control.topPadding + control.availableHeight / 2 - height / 2
        implicitWidth: 200
        implicitHeight: 10
        width: control.availableWidth
        height: implicitHeight
        radius: height / 2
        color: "#EBEDEF"
        
        Rectangle {
            x: control.first.visualPosition * parent.width
            width: control.second.visualPosition * parent.width - x
            height: parent.height
            color: control.checkedColor
            radius: height / 2
            
            layer.enabled: control.hovered | control.pressed
            layer.effect: DropShadow {
                transparentBorder: true
                color: control.checkedColor
                samples: 8
            }
        }
    }
    
    first.handle: Rectangle {
        x: control.leftPadding + first.visualPosition * (control.availableWidth - width)
        y: control.topPadding + control.availableHeight / 2 - height / 2
        implicitWidth: 16
        implicitHeight: 16
        radius: implicitHeight / 2
        color: control.pressed ? Qt.darker(control.checkedColor, 1.2) : control.checkedColor
        //         color: first.pressed ? "#f0f0f0" : "#f6f6f6"
        //         border.color: "#bdbebf"
        
        layer.enabled: control.hovered | control.pressed
        layer.effect: DropShadow {
            transparentBorder: true
            color: control.checkedColor
            samples: 10
        }
        
        ToolTip {
            parent: first.handle
            visible: first.pressed
            text: first.value.toFixed(1)
        }
    }
    
    second.handle: Rectangle {
        x: control.leftPadding + second.visualPosition * (control.availableWidth - width)
        y: control.topPadding + control.availableHeight / 2 - height / 2
        implicitWidth: 16
        implicitHeight: 16
        radius: implicitHeight / 2
        color: control.pressed ? Qt.darker(control.checkedColor, 1.2) : control.checkedColor
        //         color: second.pressed ? "#f0f0f0" : "#f6f6f6"
        //         border.color: "#bdbebf"
        
        layer.enabled: control.hovered | control.pressed
        layer.effect: DropShadow {
            transparentBorder: true
            color: control.checkedColor
            samples: 10
        }
        
        ToolTip {
            parent: second.handle
            visible: second.pressed
            text: second.value.toFixed(1)
        }
    }
    
}