SliderStyle QML Type | Qt Quick Controls 5.9

Qt 5.9 | Qt Quick Controls | QML Types | SliderStyle QML Type

Qt 5.9.2 Reference Documentation

# SliderStyle QML Type

Provides custom styling for Slider More...

Import Statement: | import QtQuick.Controls.Styles 1.4
Since: | Qt 5.1

- List of all members, including inherited members

## Properties

- control : Slider
- groove : Component
- handle : Component
- panel : Component
- tickmarks : Component

## Detailed Description

The slider style allows you to create a custom appearance for a Slider control.

The implicit size of the slider is calculated based on the maximum implicit size of the `background` and `handle` delegates combined.

Example:

      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
              }
          }
      }

## Property Documentation

[read-only] control : Slider

The Slider this style is attached to.

groove : Component

This property holds the background groove of the slider.

You can access the handle position through the `styleData.handlePosition` property.

handle : Component

This property holds the item for the slider handle. You can access the slider through the `control` property

panel : Component

This property holds the slider style panel.

Note that it is generally not recommended to override this.

tickmarks : Component

This property holds the tick mark labels.

Every tickmark that should be drawn must be defined within this component, so it is common to use a Repeater, for example.

You can access the handle width through the `styleData.handleWidth` property.

This QML property was introduced in QtQuick.Controls.Styles 1.1.