SliderPage.qml Example File
touch/content/SliderPage.qml
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.1
Item {
width: parent.width
height: parent.height
Column {
spacing: 12
anchors.centerIn: parent
Slider {
anchors.margins: 20
style: touchStyle
value: 0
}
Slider {
anchors.margins: 20
style: touchStyle
value: 0.5
}
Slider {
anchors.margins: 20
style: touchStyle
value: 1.0
}
}
Component {
id: touchStyle
SliderStyle {
handle: Rectangle {
width: 30
height: 30
radius: height
antialiasing: true
color: Qt.lighter("#468bb7", 1.2)
}
groove: Item {
implicitHeight: 50
implicitWidth: 400
Rectangle {
height: 8
width: parent.width
anchors.verticalCenter: parent.verticalCenter
color: "#444"
opacity: 0.8
Rectangle {
antialiasing: true
radius: 1
color: "#468bb7"
height: parent.height
width: parent.width * control.value / control.maximumValue
}
}
}
}
}
}