Important: Please read the Qt Code of Conduct -

Sum slider value in a Gridview

  • Hello
    In my recent project, I have several sliders in a gridview. I plan to sum two different slider's value.
    For example, I want to sum the value of the first and third slider (with Gray and Blue color) and show that in the up textbox (its current value is 0).

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.3
    Window {
        visible: true
        width: 640
        height: 480
           GridView {
            id: gridView
            x: 44
            y: 116
            width: 332
            height: 289
            boundsBehavior: Flickable.DragOverBounds
            flickableDirection: Flickable.VerticalFlick
            contentWidth: 70
            layoutDirection: Qt.LeftToRight
            contentHeight: 70
            flow: GridView.FlowTopToBottom
            model: ListModel {
                ListElement {
                    name: "Grey"
                    colorCode: "grey"
                ListElement {
                    name: "Red"
                    colorCode: "red"
                ListElement {
                    name: "Blue"
                    colorCode: "blue"
                ListElement {
                    name: "Green"
                    colorCode: "green"
            cellHeight: 70
            cellWidth: 70
            delegate: Item {
                x: 5
                height: 50
                Column {
                    id: column
                    Slider {
                        id: slider
                        x: 82
                        y: 45
                        to: 10
                        value: 0
                    Text {
                        id: name
                        text: Math.floor(slider.value)
                        anchors.horizontalCenter: parent.horizontalCenter
                    spacing: 5
        Text {
            id: name1
            x: 228
            y: 80
            width: 27
            height: 24
            text: Math.floor(0)

  • @amir.sanaat
    Do you really need to use a model/view approach for this?

  • @Diracsbracket
    No, there is any force to use list model but I want the sliders have flikeable property.
    What's your idea?

  • @amir.sanaat
    Then you could do the following instead:

    1. Put your slider (with as root the Column) in a qml file to make it a custom type. Define
      aliases for the color and value properties such that you can access them outside.
    2. Instantiate your sliders and put them directly inside a Column and put that inside a Flickable. Give the Flickable the same relevant properties as you did in you GridView.

    Doing it like this gives your direct access to the sliders properties without the complications of having to access your slider items via their index in the GridView as you did.

    In your sum Text, you can thus simply use:

    text: (Math.floor(greySlider.value + blueSlider.value)).toString()

Log in to reply