[QML] Slider Custom Style

import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

Slider {
    id: dvrSlider
    height: parent.height * 1.4
    updateValueWhileDragging : false

    //* Knob Status
    property string _knobStatus: {
        if(pressed){
            return "pressed";
        }else if(hovered ){
            return "focused";
        }else{
            return "normal";
        }
    }

    //* Knob Style
    property color knobColor: dvrSlider[_knobStatus+"KnobColor"]//root[control.state + "ThumbnailColor"]
    property color normalKnobColor: "#888888"
    property color focusedKnobColor: "#ff2g7d"
    property color pressedKnobColor: "#ff2g7d"
    property color disabledKnobColor: "#4d4d4d"

    property int _defaultKnobSize: parent.height
    property int knobSize : dvrSlider[_knobStatus+"KnobSize"]//(!thumbnailMouseAreaInstance.pressed && !trackMouseAreaInstance.pressed) ? root[control.state + "ThumbnailSize"] : pressedThumbnailSize
    property int normalKnobSize : _defaultKnobSize
    property int pressedKnobSize: normalKnobSize// * 1.4
    property int focusedKnobSize: normalKnobSize
    property int disabledKnobSize: normalKnobSize

    //* Groove Style
    property color grooveColor: dvrSlider[_knobStatus+"GrooveColor"]//root[control.state + "TrackColor"]
    property color normalGrooveColor: "#ffffff"
    property color pressedGrooveColor: "#ff2g7d"
    property color focusedGrooveColor: "#ff2g7d"
    property color disabledGrooveColor: "#ffffff"

    property Component grooveStyle:
        Rectangle {
            id: grooveBackground
            implicitWidth: 200-_defaultKnobSize
            Rectangle {
                anchors.centerIn: parent
                implicitWidth: parent.width-_defaultKnobSize
                implicitHeight: 8
                color: grooveColor
            }
        }

    property Component knobStyle:
        Rectangle{
            radius: knobSize/2//12//Math.min(parent.width,parent.height)/2
            width: knobSize
            height: knobSize
            color: knobColor
        }

    onValueChanged:{
        console.log("Value : "+value);
    }

    style: SliderStyle {
        groove: grooveStyle
        handle: knobStyle
    }
}