QML slider tickmark with text at start and end - qt

Question

How to achieve something like this.
Should the text thin and thick must be outside slider as labels or can they be part of tickmarks?

Answer 1

That can be easily done with styles. I advice you to look at QML controls/styles source in $QTHOME/qml/QtQuick/Controls[/Styles/Base] to have an understanding of default styles of QML controls.
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4
Window {
id: rootWindow
visible: true
height: 800
width: 800
Rectangle {
width: 350
height: 100
color: "#555"
anchors.centerIn: parent
Slider {
anchors.centerIn: parent
minimumValue: 1
maximumValue: 5
stepSize: 1
tickmarksEnabled: true
width: 300
style: SliderStyle {
handle: Rectangle {
width: 18
height: 30
border.width: 2
border.color: "#555"
color: "#CCC"
radius: 5
}
groove: Rectangle {
height: 15
width: parent.width
anchors.verticalCenter: parent.verticalCenter
color: "#CCC"
}
tickmarks: Repeater {
id: repeater
model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue) / control.stepSize : 0
Item {
Text {
y: repeater.height + 5
width : repeater.width / repeater.count
x: width * index
height: 30
color: "#CCC"
font.pixelSize: 20
text: getText()
horizontalAlignment: getAlign()
function getText() {
if(index === 0) return "THIN"
else if(index === repeater.count - 1) return "THICK"
else return "";
}
function getAlign() {
if(index === "0") return Text.AlignLeft
else if(index === repeater.count - 1) return Text.AlignRight
else return Text.AlignHCenter;
}
}
Rectangle {
color: "#CCC"
width: 2 ; height: 5
y: repeater.height
x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))
}
}
}
}
}
}
}
The exampe is full of excessive and worthless code but that's good for understanding.

Answer 2

It doesn't seem like they can be a part of the tick marks, but you can easily achieve this with separate text labels:
Slider {
id: slide
width: 200
}
Text {
text: "THIN"
anchors.top: slide.bottom
anchors.left: slide.left
}
Text {
text: "THICK"
anchors.top: slide.bottom
anchors.right: slide.right
}