How to preserve bindings in a re-usable QML component? - qt

Question

I'm trying to preserve the double binding logic from within my slider component such that it behaves the same as the builtin Slider:
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Window {
ColumnLayout {
SimpleSlider { id: sslider0; value: .3 }
SimpleSlider { id: sslider1; value: 1 - sslider0.value }
Slider { id: slider0; value: .3 }
Slider { id: slider1; value: 1 - slider0.value }
}
}
Unfortunately, it doesn't:
Here is my SimpleSlider.qml:
import QtQuick 2.4
Item {
id: simple_slider
property real value: .5
property real min_value: 0
property real max_value: 1
width: childrenRect.width
height: childrenRect.height
function linear(a, b, x) { return (x - a) / (b - a) }
function mix(a, b, x) { return a * (1 - x) + b * x }
FontMetrics { id: fontMetrics }
Rectangle {
id: main_box
width: Math.max(txt_label.width + 10, 50)
height: fontMetrics.height + 10
radius: 2
color: "darkgrey"
}
Rectangle {
id: filled_box
width: linear(min_value, max_value, value) * main_box.width
height: main_box.height
radius: main_box.radius
color: "orange"
}
Text {
id: txt_label
text: value.toFixed(3)
anchors.centerIn: main_box
}
MouseArea {
property real xval: simple_slider.value
id: drag_slider
anchors.fill: parent
onPositionChanged: xval = get_value_from_pos(mouse.x)
function get_value_from_pos(x) {
var v = Math.min(Math.max(linear(0, main_box.width, x), 0), 1)
return mix(min_value, max_value, v)
}
}
Binding {
target: simple_slider
property: "value"
value: drag_slider.xval
}
}
The reason is obvious: I'm overwriting the binding here: onPositionChanged: xval = get_value_from_pos(mouse.x) (and confirmed by QT_LOGGING_RULES="qt.qml.binding.removal.info=true")
But while I identified the core of the issue, I'm not sure how to deal with it.
There might be a twisted design where I would turn this into a declarative based form using the position change state, but then I'll have a similar issue when my slider will also accept the value from a TextInput (which will need to update the value in a similar fashion in its onAccepted callback).

Answer 1

JarMan's hint is a good one. I tried to solve the bidirectional binding problem in your example, but had no luck. So I present to you the styled standard slider:
This is my SimpleSlider.qml:
import QtQuick 2.15
import QtQuick.Templates 2.15 as T
T.Slider {
id: slider
width: 200
height: 40
background: Rectangle {
color: "darkgrey"
Rectangle {
width: slider.visualPosition * parent.width
height: parent.height
color: "orange"
}
}
Text {
text: slider.value.toFixed(3)
anchors.centerIn: slider
}
}

Answer 2

Edited SimpleSlider.qml:
import QtQuick 2.15
import QtQml 2.15
Item {
id: simple_slider
property real value: .5
property real tempValue: value
property real min_value: 0
property real max_value: 1
width: childrenRect.width
height: childrenRect.height
function linear(a, b, x) { return (x - a) / (b - a) }
function mix(a, b, x) { return a * (1 - x) + b * x }
FontMetrics { id: fontMetrics }
Rectangle {
id: main_box
width: Math.max(txt_label.width + 10, 50)
height: fontMetrics.height + 10
radius: 2
color: "darkgrey"
}
Rectangle {
id: filled_box
width: linear(min_value, max_value, tempValue) * main_box.width
height: main_box.height
radius: main_box.radius
color: "orange"
}
Text {
id: txt_label
text: tempValue.toFixed(3)
anchors.centerIn: main_box
}
MouseArea {
///property real xval: simple_slider.value
id: drag_slider
anchors.fill: parent
onPositionChanged: tempValue = get_value_from_pos(mouse.x)
onReleased: tempValue = Qt.binding(function() { return value })
function get_value_from_pos(x) {
var v = Math.min(Math.max(linear(0, main_box.width, x), 0), 1)
return mix(min_value, max_value, v)
}
}
Binding on value {
when: drag_slider.pressed
value: tempValue
restoreMode: Binding.RestoreBinding
}
}