Implementing a slider in QML with a VU-meter like image as a background

Question

I am trying to create a slider that I can move up and down with my mouse. However, I want to use my own image as the background. I am currently trying to implement this with a OpacityMask. Basically, I am trying to make the opacity 0 from where the handle is to the right end of the slider.

I would ordinarily just move a rectangle that is same color as the background over it. However, I want whatever element is under the slider to be displayed when the slider is pulled back.

How can I create this behavior?

import QtQuick 2.7
import QtQuick.Templates 2.0 as T
import QtGraphicalEffects 1.12
import "."

T.Slider {
    id: control

    implicitWidth: 200
    implicitHeight: 26

    handle: Rectangle {
        x: control.visualPosition * (control.width - width)
        y: (control.height - height) / 2
        width: 20
        height: 15

        radius: 5
        color: control.pressed ? "#f0f0f0" : "#f6f6f6"
        border.color: "gray"
    }

    background: OpacityMask {
        anchors.fill: sliderImage
        source: sliderImage
        maskSource: mask
    }

    Image{
        id: sliderImage
        source: "./Jarvis2/images/volume_barH.png"
        height: 20
        width: parent.width
        visible: false
    }

    Item{
        id: mask
        anchors.fill: sliderImage

        Rectangle{
            id: outer
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            width: control.visualPosition*parent.width
            color: "gray"
            opacity: 1
            visible: false
        }

        Rectangle {
            id: inner
            color: "transparent"
            z: 1
            opacity: 1
            anchors.left: outer.right
            anchors.right: parent.right
            anchors.top: outer.top
            anchors.bottom: outer.bottom
            visible: false
        }
    }

}

The slider at 100%:

100percent

The slider at around 70%:

70percent

The slider at around 24%

24percent

It's funny you found the handle property, but not the background property, seems you want that, right? — Amfasis
I just realized that I did not put the OpacityMask section in the code, so I just added that. I tried setting the background both to Image and OpacityMask. All I see is the handle but no background image. — conrad li
Can you make some visual explanation (in paint or such) of what you want to see (and of what you currently see)? Normally a slider should be see-through except for the slider-bar and the handle — Amfasis

Amfasis Amfasis · Accepted Answer · 2020-06-17T08:35:51

I think you can omit the OpacityMask and simply use a clipping Item:

Slider {
    id: slider
    width: 100
    height: 300
    orientation: Qt.Vertical

    background: Item {
        id: background

        Item {
            clip: true
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            height: (1 - slider.visualPosition) * slider.height

            Rectangle { //Your image goes here
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                height: background.height

                gradient: Gradient {
                    GradientStop { position: 0; color: "blue" }
                    GradientStop { position: 1; color: "red" }
                }
            }
        }
    }
}

You might have to fiddle a bit with the height of the clipping Item since there is some padding involved.

If you nevertheless want to use OpacityMask (because you want a different shape), you should put them together in the background:

Slider {
    id: slider
    width: 100
    height: 300
    orientation: Qt.Vertical

    background: Item {
        id: background

        Rectangle { //Your image goes here
            id: image
            anchors.fill: parent
            visible: false

            gradient: Gradient {
                GradientStop { position: 0; color: "blue" }
                GradientStop { position: 1; color: "red" }
            }
        }

        OpacityMask {
            anchors.fill: parent
            source: image
            maskSource: mask
        }

        Item {
            id: mask
            visible: false

            anchors.fill: parent

            Rectangle {
                radius: 10
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                height: parent.height * slider.position
                color: "white"
            }
        }
    }
}

Implementing a slider in QML with a VU-meter like image as a background

1 Answers