Minor update in snake simulator UI

snakesimulator/snakesimulatorui/main.qml

@@ -25,7 +25,7 @@
 
 import QtQuick 2.11
 import QtQuick.Window 2.11
-import QtQuick.Controls 1.4
+import QtQuick.Controls 2.12
 import QtQuick.Controls.Styles 1.0
 
 import snakesimulator 1.0
@@ -63,7 +63,7 @@ ApplicationWindow {
 
     Rectangle {
         id: sideBar
-        width: speedTextField.width + contentColumn.anchors.margins*2
+        width: speedControl.width + contentColumn.anchors.margins*2
         color: "#000000"
         anchors {
             right: parent.right
@@ -97,17 +97,44 @@ ApplicationWindow {
                 font.pointSize: 14
                 font.weight: Font.Bold
                 color: "#ffffff"
-                text: "Speed: "
+                text: "Speed: " + (speedControl.value > 10 ? "\u221e" : speedControl.value)
             }
-            TextField {
-                id: speedTextField
-                font.pointSize: 14
-                validator: RegExpValidator {
-                    regExp: /1?[0-9]{1}/
+            Slider {
+                id: speedControl
+                value: 5
+                from: 1
+                stepSize: 1.0
+                to: 11
+                snapMode: Slider.SnapAlways
+                onValueChanged: {
+                    changeTimer.restart()
                 }
 
-                onAccepted:  {
-                    client.setSpeed(parseInt(text, 10))
+                background: Rectangle {
+                    x: speedControl.leftPadding
+                    y: speedControl.topPadding + speedControl.availableHeight / 2 - height / 2
+                    implicitWidth: 200
+                    implicitHeight: 4
+                    width: speedControl.availableWidth
+                    height: implicitHeight
+                    radius: 2
+                    color: "#bdbebf"
+
+                    Rectangle {
+                        x: 0
+                        width: speedControl.position * parent.width
+                        height: parent.height
+                        color: speedControl.value <= 10 ? "lightgreen" : "#003b6f"
+                        radius: 2
+                    }
+                }
+                Timer {
+                    id: changeTimer
+                    repeat: false
+                    interval: 200
+                    onTriggered: {
+                        client.setSpeed(speedControl.value > 10 ? 0 : speedControl.value)
+                    }
                 }
             }
         }
@@ -119,18 +146,23 @@ ApplicationWindow {
             anchors.margins: 10
             anchors.bottom: bestBtn.top
             anchors.right: parent.right
-
+            width: indicator.width + 170
             checked: true
             onCheckedChanged: {
                 client.playBestInLoop(playBestCheckbox.checked)
             }
 
-            style: CheckBoxStyle {
-                label: Text {
-                    color: "white"
-                    text: "Repeat Best"
-                }
+            contentItem: Text {
+                id: text
+                color: "white"
+                text: "Repeat Best"
+                wrapMode: Text.NoWrap
+                anchors.left: playBestCheckbox.indicator.right
+                anchors.leftMargin: 10
+                anchors.right: undefined
+                verticalAlignment: Text.AlignVCenter
             }
+
             Component.onCompleted: {
                 client.playBestInLoop(playBestCheckbox.checked)
             }