Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

QML ProgressBar and Slider elements in Meego Qt Quick Components

From Wiki
Jump to: navigation, search

This article explains how to use the QML ProgressBar and Slider elements in the MeeGo Qt Quick Components.

ProgressBar and Slider Elements
Article Metadata
Created: chintandave_er (26 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)

Main Page

The code below shows a page with the MeeGo ProgressBar and Slider elements. The QML updates the value of the ProgressBar to match the Slider's value (in the Slider onValueChanged event handler.

import QtQuick 1.1  
import 1.0
Page {
tools: commonTools
ProgressBar {
id: progressBar
width: 300
minimumValue: 0
maximumValue: 100
value: 50
anchors.centerIn: parent
Slider {
valueIndicatorVisible: true
value: 50
anchors {
horizontalCenter: parent.horizontalCenter
top: progressBar.bottom
topMargin: 10
onValueChanged: {
progressBar.value = mySlider.value

Main.qml (PageStackWindow)

import QtQuick 1.1
import 1.0
PageStackWindow {
id: appWindow
initialPage: mainPage
MainPage {
id: mainPage
ToolBarLayout {
id: commonTools
visible: true
ToolIcon {
platformIconId: "toolbar-view-menu"
anchors.right: (parent === undefined) ? undefined : parent.right
onClicked: (myMenu.status == DialogStatus.Closed) ? : myMenu.close()
Menu {
id: myMenu
visualParent: pageStack
MenuLayout {
MenuItem { text: qsTr("Sample menu item") }
This page was last modified on 13 June 2012, at 10:56.
104 page views in the last 30 days.