How to customize Slider?

vishu_fcb

I want a slider basically in which as the handler position moves forward the slider colour should change as the slider position progresses .
I tried using binding and gradient technique but nothing worked. Can anyone please help me ?

Hi!

Slider {
    id: control
    from: 0
    to: 1
    value: 0

    function colorFromValue(v) {
        return Qt.rgba(v, 0, 1-v)
    }

    handle: Rectangle {
        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
        y: control.topPadding + control.availableHeight / 2 - height / 2
        implicitWidth: 26
        implicitHeight: 26
        radius: 13
        border.color: "#000"
        color: control.colorFromValue( control.valueAt(control.position) )
    }
}

vishu_fcb

@Wieland thanks a lot !! i ll try it once !!

vishu_fcb

@Wieland this code dint work!!

Eeli K

@vishu_fcb How it doesn't work? In that example it's the handle color that changes, you can of course customize your slider so that it's the background rectangle that changes. See "customizing slider" in the documentation and qml/QtQuick/Controls2/Slider.qml in your Qt installation. Wieland just gave the basic idea: the color is bind to the slider position via a function.

vishu_fcb

@Eeli-K Handler colour i am able to change . I ll try once again