Qt Qml滑块样式，在滑块前后指定不同的凹槽颜色'；拉手

因此，我想创建一个滑块样式，类似于默认样式，也更符合我的应用程序样式，但我发现很难在滑块手柄前后指定不同的颜色

这是我的代码的简化版本，没有渐变、锚点和其他属性：

Slider{
            id: widthSlider
            style: SliderStyle {
                    groove: Rectangle {
                        height: widthSlider.height*0.17
                        width: widthSlider.width
                        color: "black"
                        radius: 8
                    }
                    handle: Rectangle {
                        color: "grey"
                    }
                }
        }

我尝试了一个粗略的解决方法，在滑块中放置两个矩形，固定到手柄位置，如下所示：

Slider{
            id: widthSlider
            Rectangle {
                anchors.left: widthSlider.left
                anchors.right: widthSlider.__handlePos
                color: "black"
            }
            Rectangle {
                anchors.left: widthSlider.__handlePos
                anchors.right: widthSlider.right
                color: "white"
            }
     ...
}

但是我不能锚定到句柄的位置，因为它只是一个双精度（我得到错误：无法将双精度分配给QQuickAnchorLine）

有人知道我如何在Qml中做到这一点吗

滑块{
anchors.centerIn:父对象
数值：0.5
宽度：400
样式：滑块样式{
凹槽：项目{
八:10
线性梯度{
锚定。填充：父级
开始：Qt.点（0，control.height/2）
结束：Qt.点（control.width、control.height/2）
梯度：梯度{
渐变停止{位置：0.0；颜色：“橙色”}
GradientStop{position:control.value；颜色：“brown”}
渐变停止{位置：1.0；颜色：“橙色”}
}
}
}
}
}

或：

滑块{
anchors.centerIn:父对象
数值：0.5
宽度：400
样式：滑块样式{
凹槽：矩形{
八:10
颜色：“浅灰色”
边界{
颜色：“999”
宽度：1
}
长方形{
八:10
颜色：“橙色”
隐式宽度：control.value*parent.width
边界{
颜色：“999”
宽度：1
}
}
}
}
}

我意识到这是一个老问题。但是，为了便于将来参考，代表手柄前颜色的

矩形应具有
样式数据.handlePosition
的宽度。下面的代码来自具有此更改的第二个解决方案

Slider {
        anchors.centerIn: parent
        value: 0.5
        width: 400
        style: SliderStyle {
            groove: Rectangle {
                implicitHeight: 10
                color: "lightgrey"
                border {
                    color: "#999"
                    width: 1
                }
                Rectangle {
                    implicitHeight: 10
                    color: "orange"
                    implicitWidth: styleData.handlePosition
                    border {
                        color: "#999"
                        width: 1
                    }
                }
            }
        }
    }

不是真的。显示我的问题。第一个滑块是您的代码所做的（将第三个颜色：“橙色”更改为“棕色”以使其可见），第二个图片是我喜欢做的。我希望凹槽根据滑块手柄的位置更改颜色。在您的代码中，更改句柄的位置根本不会更改颜色。它有点工作，但肯定有更好的方法。我如何将手柄定位到滑块的中心