Ползунок Slider

Элемент Slider представляет ползунок/слайдер и используется для выбора значения путем перемещения маркера/трекбара по дорожке/шкале значений.

Основные свойства типа Slider:

• from: начальное значение

• to: конечное значение

• value: текущее значение

• stepSize: шаг перемещения

• handle: элемент (тип Item), который представляет маркер

• live:

• orientation: задает направление слайдера и может принимать следующие значения:

  • Qt.Horizontal: горизонтальный слайдер (значение по умолчанию)

  • Qt.Vertical: вертикальный слайдер

• snapMode: определяет режим перехода между значениями. Может принимать следующие значения:

  • Slider.NoSnap: маркер перемещается на ту позицию на дорожке, куда его поместит пользователь (по умолчанию).

  • Slider.SnapAlways: маркер автоматически перемещается на ближайшее деление на дорожке при перетаскивании.

  • Slider.SnapOnRelease: маркер автоматически перемещается на ближайшее деление на дорожке после отпускания.

• touchDragThreshold: содержит пороговое значение (в логических пикселях), при котором будет инициировано событие сенсорного перетаскивания.

Простейший слайдер:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"
    Column{

        Slider {
            from: 1     // начальное значение
            value: 25   // текущее значение
            to: 100     // конечное значение
            stepSize: 1 // шаг перемещения
        }
    }
}

Вертикальный слайдер:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"
    Column{
        padding: 5
        anchors.fill: parent

        Slider {
            height: parent.height
            orientation: Qt.Vertical    // вертикальный слайдер
            from: 1
            value: 25
            to: 100
        }
    }
}

Отслеживание значения слайдера

При перемещении маркера слайдера генерируется сигнал moved(), который можно обработать с помощью обработчика onMoved:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"
    Column{
        padding: 5
        anchors.fill: parent
        Slider {
            id: slider
            width: parent.width
            from: 0
            value: 50
            stepSize: 10
            to: 100
            onMoved: {output.text = "Value: " + value}  // Text отображает текущее значение
        }
        Text {
            id: output
            font.pixelSize: 15
        }
    }
}