SliderKeyboardController.qml

import QtQuick 2.5
import Sailfish.Silica 1.0

QtObject {
    id: root
    property var item: null
    property var nextItem: null
    property var previousItem: null
    property var exitItem: null

    property real fastIncrease: 10
    property real slowIncrease: 1

    Component.onCompleted: {
        item._hasValueLabel = true
        if (item._valueLabel) {
            item._valueLabel.destroy()
        }
        item._valueLabel = valueIndicatorComponent.createObject(item)

        item.downChanged.connect(onDownChanged)
        item.focusChanged.connect(onFocusChanged)

        item.KeyNavigation.tab = nextItem
        item.KeyNavigation.down = nextItem
        item.KeyNavigation.up = previousItem

        item.Keys.pressed.connect(onKeyPressed)
    }

    function onKeyPressed(event) {
        switch (event.key) {
        case Qt.Key_Escape:
            exitItem.forceActiveFocus()
            break;
        case Qt.Key_Left:
            if (item.value > item.minimumValue) {
                if (event.modifiers & Qt.ShiftModifier) {
                    item.value -= fastIncrease
                } else {
                    item.value -= slowIncrease
                }
                if (item.value < item.minimumValue) {
                    item.value = item.minimumValue
                }
            }
            break;
        case Qt.Key_Right:
            if (item.value < item.maximumValue) {
                if (event.modifiers & Qt.ShiftModifier) {
                    item.value += fastIncrease
                } else {
                    item.value += slowIncrease
                }
                if (item.value > item.maximumValue) {
                    item.value = item.maximumValue
                }
            }
            break;
        case Qt.Key_Enter:
        case Qt.Key_Return:
            if (item._valueLabel.focus) {
                item._valueLabel.focus = false
            } else {
                item._valueLabel.forceActiveFocus()
            }
            break;
        }
    }

    function onDownChanged() {
        if (item.down) item.highlighted = Qt.binding(function() {return item.down})
    }

    function onFocusChanged() {
        if (item.focus) item.highlighted = Qt.binding(function() {return item.down || item.focus})
    }

    property var valueIndicatorComponent : Component {
        TextField {
            id: valueIndicator

            property var slider: item

            color: slider.highlighted ? slider.highlightColor : slider.valueLabelColor
            font.pixelSize: Theme.fontSizeHuge

            transformOrigin: Item.BottomLeft
            scale: slider.pressed ? 1.0 : (Theme.fontSizeLarge / Theme.fontSizeHuge)

            Behavior on scale { NumberAnimation { duration: 80 } }

            text: focus ? parseInt(slider.value) : slider.valueText
            placeholderText: "%1 - %2, step: %3".arg(slider.minimumValue).arg(slider.maximumValue).arg(slider.stepSize)

            property real _midOff: (scale * width - slider._highlightItem.width)/2

            x: Math.min(Math.max(Theme.paddingMedium, slider._highlightItem.x - _midOff), parent.width - scale * width - Theme.paddingMedium)
            anchors.bottom: slider._backgroundItem.verticalCenter
            anchors.bottomMargin: Theme.paddingMedium + Theme.paddingSmall

            background: null
            width: text ? implicitWidth : fontMetrics.advanceWidth(placeholderText) / scale
            enabled: slider.focus
            opacity: 1.0

            onTextChanged: if (acceptableInput) slider.value = parseInt(text)
            validator: IntValidator {
                bottom: slider.minimumValue
                top: slider.maximumValue
            }

            FontMetrics {
                id: fontMetrics
                font: valueIndicator.font
            }
        }
    }
}

TestPage.qml

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page
    allowedOrientations: Orientation.All

    SilicaFlickable {
        anchors.fill: parent
        contentHeight: column.height
        PullDownMenu {
            MenuItem {
                text: qsTr("Show Page 2")
                onClicked: pageStack.push(Qt.resolvedUrl("SecondPage.qml"))
            }
        }
        Column {
            id: column
            width: page.width
            spacing: Theme.paddingLarge

            focus: true
            KeyNavigation.tab: slider1

            PageHeader {
                property bool _skipFocus: true
                title: qsTr("UI Template")
            }
            Label {
                property bool _skipFocus: true
                x: Theme.horizontalPageMargin
                text: qsTr("Hello Sailors")
                color: Theme.secondaryHighlightColor
                font.pixelSize: Theme.fontSizeExtraLarge
            }
            Slider {
                id: slider1
                width: parent.width
                label: "Slider 1"
                valueText: "%1 px".arg(parseInt(value))

                minimumValue: 0
                maximumValue: 100
                stepSize: 1
                value: 0

                SliderKeyboardController {
                    id: slider1controller
                    item: slider1
                    nextItem: slider2
                    previousItem: slider3
                    exitItem: column
                }
            }

            Slider {
                id: slider2
                width: parent.width
                label: "Slider 2"
                valueText: "%1 px".arg(parseInt(value))

                minimumValue: 0
                maximumValue: 100
                stepSize: 1
                value: 0

                SliderKeyboardController {
                    id: slider2controller
                    item: slider2
                    nextItem: slider3
                    previousItem: slider1
                    exitItem: column
                }
            }

            Slider {
                id: slider3
                width: parent.width
                label: "Slider 3"
                valueText: "%1 px".arg(parseInt(value))

                minimumValue: 0
                maximumValue: 100
                stepSize: 1
                value: 0

                SliderKeyboardController {
                    id: slider3controller
                    item: slider3
                    nextItem: slider1
                    previousItem: slider2
                    exitItem: column
                }
            }
        }
    }
}

property var valueIndicatorComponent :  Component {
        TextField {

eq

property Component valueIndicatorComponent : TextField {