How to make a resizable gauge with QML - text size problem

Question

I am trying to make a resizable gauge (audio fader like in the image below) with Gauge / GaugeStyle.

Tickmarks shall be left and right of the fader.

Somehow I am unable to find a way to correctly change the pointSize / pixelSize of the tickmark labels.

I am wrapping my head around this for days now but, most likely due to lack of experience and/or know-how of QML, I can't get that to work. The program starts with a 'middle-sized' window and I want to resize it larger and smaller to a minimum/maximum height/width.

I am pretty sure there are better solutions that might work out of the box than mine, but I couldn't find something matching.

Whenever I resize the window to its max height, the tickmark labels get (slightly) out of their vertical center position.

So I'd appreciate any help getting me to where I want.

Or would it be better/easier to just use a prepared image which will be resized correctly ? I don't think there's any performance impact since the window will not be resized very often during the run of the program.

I already tried a bunch of things even to split the tickmark area into rows/columns to get this going. Text.Fit dosen't work either the way I want it to.

I am using Qt 5.12.3 with Qt Creator 4.9.1 on macOS 10.12.6

Here's my code :

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Extras 1.4
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4

Window
{
    id              : myMainWindow
    visible         : true
    width           : 400
    height          : 400
    minimumHeight   : 300
    minimumWidth    : 300
    maximumHeight   : 800
    maximumWidth    : 800
    title: qsTr("Gauge Test")

    Gauge
    {
        id: myGauge
        height : parent.height
        scale: 0.9
        width: parent.width / 3
        anchors.verticalCenter: parent.verticalCenter    

        minimumValue: -20
        maximumValue: 70
        minorTickmarkCount: 0
        value: 0

        font.family: "Tahoma"

        style: GaugeStyle
        {
            id: myGaugeStyle

            valueBar : Item { visible : false}

            tickmark : Item
            {
                id: myTickmarks
                implicitHeight: Math.max(myMainWindow.height/ 200,1)
                width : myGauge.width / 5

                Rectangle
                {
                    id:leftDash
                    implicitHeight: Math.max(myMainWindow.height/ 200,1)
                    width : myGauge.width / 5
                    anchors.left: myTickmarks.left
                    anchors.leftMargin: myGauge.width / 5
                    color: "blue"
                }

                Rectangle
                {
                    id:noDash
                    anchors.left : leftDash.right
                    implicitHeight: Math.max(myMainWindow.height/ 200,1)
                    width : myGauge.width / 5
                    color: "transparent"
                }

                Rectangle
                {
                    id:rightDash
                    implicitHeight: Math.max(myMainWindow.height/ 200,1)
                    width : myGauge.width / 5
                    anchors.left : noDash.right
                    color: "blue"
                }
            }

            // Does not work as expected
            /*
            tickmarkLabel: Text
            {
                id: myTickmarkLabel
                text: styleData.value
                font.pointSize : Math.max(
                    Math.sqrt(myMainWindow.width * myMainWindow.height * 0.8 ) / 26
                    ,6)
                // verticalAlignment : Text.AlignVCenter
                color: "blue"
                anchors.left: parent.left
                anchors.leftMargin: font.pointSize
                // anchors.rightMargin : font.pointSize
                // anchors.topMargin : font.pointSize
                // anchors.bottomMargin : font.pointSize
            }
            */

            // Works pretty well : 
            tickmarkLabel: Text
            {
               id: myTickmarkLabel
               text: styleData.value

               transform: Scale 
               {
                  xScale: 3 * myMainWindow.width / myMainWindow.maximumWidth
                  yScale: 3 * myMainWindow.height / myMainWindow.maximumHeight 
               }

               color: "blue"
               anchors.left: parent.left
               anchors.leftMargin: myMainWindow.width / myMainWindow.maximumWidth
            }
        }
    }

    Rectangle
    {
        id: middleRect
        height: parent.height
        width : parent.width / 3
        anchors.left: myGauge.right
        color : "steelblue"
    }

    Rectangle
    {
        id: rightRect
        height: parent.height
        width : parent.width / 3
        anchors.left: middleRect.right
        color : "grey"
    }
}

As said, I cannot align the tickmark labels correctly for all sizes the window can have.

Here's an image of what the fader shall look like: