Слайдер в Silica

В приложении пользователь может вводить числовые данные с помощью слайдера. Для реализации этого компонента разработчику рекомендуется использовать Slider из Silica.

Пример описания слайдера в QML:

Slider {
    width: parent.width
    minimumValue: 0
    maximumValue: 100
    value: 70
    stepSize: 2
    valueText: qsTr("%1 %").arg(value)
    label: qsTr("Выберите значение")
    onValueChanged: infoLabel.text = qsTr("Выбрано значение %1 %").arg(value)
}

В примере задаются свойства слайдера:

minimumValue — минимальное значение, которое может быть установлено слайдеру. Визуально оно расположено на левой границе слайдера;
maximumValue — максимальное значение, которое может быть установлено слайдеру. Визуально оно расположено на правой границе слайдера;
value — значение слайдера, которое выбрал пользователь или которое было назначено слайдеру в коде. В примере слайдеру задаётся значение 70 по умолчанию;
stepSize — минимальный шаг, который будет делать слайдер, когда пользователь будет перемещать ползунок. В примере это значение 2, так что пользователь при смещении ползунка от начальных 70 сможет выбрать 72, 74, ... или 68, 66, ..., то есть только чётные значения. stepSize ограничивает только выбор пользователя, в коде приложения свойству value можно задать любое значение;
valueText — текст, который будет появляться рядом со значением, выбранным пользователем. По умолчанию это значение свойства value, т.е. само выбранное значение. В примере к выбранному значению добавляется символ % для пояснения единиц измерения;
label — текст под слайдером. Его следует использовать, чтобы пояснить пользователю, для чего нужно использовать слайдер.

Изменение значения слайдера можно отследить с помощью обработчика onValueChanged. В примере выбранное пользователем значение слайдера выводится в текст метки infoLabel.

Полный пример страницы со слайдером:

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    allowedOrientations: Orientation.All

    PageHeader {
        title: qsTr("Пример слайдера")
    }

    Slider {
        id: slider
        anchors.centerIn: parent
        width: parent.width
        minimumValue: 0
        maximumValue: 100
        value: 70
        stepSize: 2
        valueText: qsTr("%1 %").arg(value)
        label: qsTr("Выберите значение")
        onValueChanged: infoLabel.text = qsTr("Выбрано значение %1 %").arg(value)
    }
    Label {
        id: infoLabel
        anchors.top: slider.bottom
        height: Theme.itemSizeSmall
        anchors.horizontalCenter: parent.horizontalCenter
    }
}

Данная страница будет выглядеть следующим образом:

Пример слайдера