Did any one of you encountered this problem?
The Slider handle isn't centered on the tickmarks, it only displays correctly at the minimum and maximum value.
here's my code
Slider {
id: slider
anchors {
fill: parent
topMargin: 30
horizontalCenter: parent.horizontalCenter
}
style: SliderStyle {
groove: Rectangle {
color: "white"
implicitHeight: 8
implicitWidth: parent.width
radius: 6
gradient: Gradient {
GradientStop { position: 0.0; color: "gray" }
GradientStop { position: 1.0; color: "white" }
}
}
handle: Image {
source: "../../images/mdpi/handle-slider.png"
sourceSize.width: 30
sourceSize.height: 30
anchors {
centerIn: parent.Center
}
}
tickmarks: tickMarks
Component {
id: tickMarks
Repeater {
id: repeater
model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue) / control.stepSize : 0
Rectangle {
color: "gray"
width: 2
height: (index % 2 == 0) ? 14 : 8
y: repeater.height
x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))
}
}
}
}
maximumValue: 80
minimumValue: 1
stepSize: 10
tickmarksEnabled: true
value: 40
}
Slider {
id: slider
anchors {
fill: parent
topMargin: 30
horizontalCenter: parent.horizontalCenter
}
style: SliderStyle {
groove: Rectangle {
color: "white"
implicitHeight: 8
implicitWidth: parent.width
radius: 6
gradient: Gradient {
GradientStop { position: 0.0; color: "gray" }
GradientStop { position: 1.0; color: "white" }
}
}
handle: Image {
source: "../../images/mdpi/handle-slider.png"
sourceSize.width: 30
sourceSize.height: 30
anchors {
centerIn: parent.Center
}
}
tickmarks: tickMarks
Component {
id: tickMarks
Repeater {
id: repeater
model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue) / control.stepSize : 0
Rectangle {
color: "gray"
width: 2
height: (index % 2 == 0) ? 14 : 8
y: repeater.height
x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))
}
}
}
}
maximumValue: 80
minimumValue: 1
stepSize: 10
tickmarksEnabled: true
value: 40
}
To copy to clipboard, switch view to plain text mode
slider.PNG
Bookmarks