How to customize the appearance of a QML slider?

Question

Qt

Misters, help, I share the first steps on Qt. The task is to change the style of the slider. Doesn't compile, gives error

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls.Styles 1.4

 Slider {
        from: 1
        value: 25
        to: 100
        orientation: Qt.Vertical
        anchors.centerIn: parent
        width: 100
        stepSize: 5
        style: SliderStyle {
                groove: Rectangle {
                    implicitWidth: 200
                    implicitHeight: 8
                    color: "gray"
                    radius: 8
                }
                handle: Rectangl.......

I get the error Invalid property name "style" in the line:
style: SliderStyle {

I use:
Qt Creator 4.11.1
Based on Qt 5.14.1 (GCC 5.3.1 20160406 (Red Hat 5.3.1-6), 64 bit)

Built on Feb 5 2020 12: 48:30

From revision b2ddeacfb5

Copyright 2008-2019 The Qt Company Ltd. All rights reserved.

Answer 1

There are 2 versions of QtQuick.Controls in qml - actually 1 and 2. By default, you include 2 , but there are no styles in it. In it, customization is done differently. Example: QtDoc . As written here stack in order for everything to work as you want, you need to use QtQuick.Controls version 1. For example like this:

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 1.4  as QQC1
import QtQuick.Controls 2.14 as QQC2
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    QQC1.Slider {
        anchors.centerIn: parent
        style: SliderStyle {
            groove: Rectangle {
                implicitWidth: 200
                implicitHeight: 8
                color: "gray"
                radius: 8
            }
            handle: Rectangle {
                anchors.centerIn: parent
                color: control.pressed ? "white" : "lightgray"
                border.color: "gray"
                border.width: 2
                implicitWidth: 34
                implicitHeight: 34
                radius: 12
            }
        }
    }
}