QML RangeSlider only works properly when you set the knob position in reverse order

Hi,

The title is a bit weird so feel free to change it to something more appropriate. I couldn't figure out a better one.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Window {
    width: 640
    height: 480
    visible: true

    ColumnLayout {
        anchors.fill: parent
        Button {
            Layout.fillWidth: true
            text: "Bug range slider"
            onClicked: {
                spinFrom.value = 90
                spinTill.value = 95
            }
        }

        SpinBox {
            id: spinFrom
            from: range.from
            to: range.to
            value: 1
        }
        SpinBox {
            id: spinTill
            from: range.from
            to: range.to
            value: 5
        }
        RangeSlider {
            id: range
            Layout.fillWidth: true
            from: 1
            to: 100
            first.value: spinFrom.value
            second.value: spinTill.value
            first.onMoved: {
                spinFrom.value = first.value
            }
            second.onMoved: {
                spinTill.value = second.value
            }
        }
    }
}

In this code, the selected range within the slider is visually broken after you press the "Bug range slider" button.

The initial positions of the knobs are at 1 and 5. The button updates them to be at 90 and 95. All are still perfectly valid options within the 1-100 total range.

Yet when the positions are updated, the slider is basically selected from position 5 till 95, not 90 till 95.

The spinboxes in this example allow you to move the knobs without pressing the knobs themselves. This is important as this shows the bug really well. Run the above code, press the "Bug range slider" button and then scroll up or down on the first spinbox. You will observe the from knob to jump to the right position immediately.

In this particular test code i can fix this behavior by flipping how i'm setting the knob positions. It would change to this:

        Button {
            Layout.fillWidth: true
            text: "Bug range slider"
            onClicked: {
                spinTill.value = 95
                spinFrom.value = 90
            }
        }

This works for this demo, but is not an option in a real world application. There property binding kinda makes it really annoying to force a particular update order.

Another way that also works (but feels nasty) is to first set the knob positions to their extreme ends and then immediately update them to the correct position.

Any ideas on a proper fix?