Improve example with key navigation.

Generally this is a redo of many of the details.

Change-Id: I08c4f58966507232220bb10892041b9e39d54e37
Reviewed-by: Jan Arve Sæther <jan-arve.saether@digia.com>

1 files changed, 25 insertions, 3 deletions

diff --git a/examples/quick/accessibility/content/Slider.qml b/examples/quick/accessibility/content/Slider.qml
index fdbfd399b9..a116308a14 100644
--- a/examples/quick/accessibility/content/Slider.qml
+++ b/examples/quick/accessibility/content/Slider.qml
@@ -46,17 +46,30 @@ import QtQuick 2.0
 Rectangle {
     id: slider
 
-    property alias text : buttonText.text
+    property alias text: buttonText.text
     Accessible.role: Accessible.Slider
 
-    property int value             // required
+    property int value : 5         // required
     property int minimumValue : 0  // optional (default INT_MIN)
     property int maximumValue : 20 // optional (default INT_MAX)
     property int stepSize : 1      // optional (default 1)
 
-    width: 30
+    width: 100
     height: 30
+    border.color: "black"
+    border.width: 1
 
+    Rectangle {
+        id: indicator
+        x: 1
+        y: 1
+        height: parent.height - 2
+        width: ((parent.width - 2) / maximumValue) * value
+        color: "lightgrey"
+        Behavior on width {
+            NumberAnimation { duration: 50 }
+        }
+    }
 
     Text {
         id: buttonText
@@ -64,4 +77,13 @@ Rectangle {
         anchors.centerIn: parent
         font.pixelSize: parent.height * .5
     }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            var pos = mouse.x / slider.width * (maximumValue - minimumValue) + minimumValue
+            slider.value = pos
+        }
+    }
+    Keys.onLeftPressed: value > minimumValue ? value = value - stepSize : minimumValue
+    Keys.onRightPressed: value < maximumValue ? value = value + stepSize : maximumValue
 }