app/resources/qml/components/SmoothSliderDelegate.qml

import QtQuick 2.0
import QtQuick.Controls 2.4

SmoothItemDelegate {
    id: control

    property double sliderValue: 0.5
    signal sliderFinished()

    onSliderValueChanged: {
        slider.value = control.sliderValue
    }

    rightPadding: slider.width + width * 0.02

    Slider {
        id: slider

        anchors {
            right: parent.right
            rightMargin: parent.width * 0.01
            verticalCenter: parent.verticalCenter
        }

        height: control.height * 0.4
        width: parent.width * 0.6

        onValueChanged: {
            control.sliderValue = value
        }

        onPressedChanged: {
            if(!pressed){
                control.sliderFinished()
            }
        }

        background: Rectangle {
            x: slider.leftPadding
            y: slider.topPadding + slider.availableHeight / 2 - height / 2
            implicitWidth: 200
            implicitHeight: 4
            width: slider.availableWidth
            height: slider.height * 0.2
            radius: height * 0.5
            color: "#bdbebf"

            Rectangle {
                width: slider.visualPosition * parent.width
                height: parent.height
                color: "#21be2b"
                radius: height * 0.5
            }
        }

        handle: Rectangle {
            x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
            y: slider.topPadding + slider.availableHeight / 2 - height / 2
            implicitWidth: 26
            implicitHeight: 26

            width: slider.height
            height: width

            radius: height * 0.5
            color: slider.pressed ? "#f0f0f0" : "#f6f6f6"
            border.color: "#bdbebf"
        }
    }

}