qqc2-desktop-style/org.kde.desktop/RangeSlider.qml

0001 /*
0002     SPDX-FileCopyrightText: 2017 Marco Martin <mart@kde.org>
0003     SPDX-FileCopyrightText: 2017 The Qt Company Ltd.
0004
0005     SPDX-License-Identifier: LGPL-3.0-only OR GPL-2.0-or-later
0006 */
0007
0008
0009 import QtQuick
0010 import QtQuick.Controls
0011 import QtQuick.Templates as T
0012 import org.kde.kirigami as Kirigami
0013
0014 T.RangeSlider {
0015     id: control
0016
0017     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
0018                             first.implicitHandleWidth + leftPadding + rightPadding,
0019                             second.implicitHandleWidth + leftPadding + rightPadding)
0020     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
0021                              first.implicitHandleHeight + topPadding + bottomPadding,
0022                              second.implicitHandleHeight + topPadding + bottomPadding)
0023
0024     padding: 6
0025
0026     first.handle: Rectangle {
0027         property bool horizontal: control.orientation === Qt.Horizontal
0028         x: control.leftPadding + (horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
0029         y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
0030         implicitWidth: 18
0031         implicitHeight: 18
0032         radius: width / 2
0033         border.color: control.activeFocus ? Kirigami.Theme.highlightColor : Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast)
0034         color: Kirigami.Theme.backgroundColor
0035         Rectangle {
0036             z: -1
0037             x: 1
0038             y: 1
0039             width: parent.width
0040             height: parent.height
0041             radius: width / 2
0042             color: Qt.rgba(0, 0, 0, 0.15)
0043         }
0044     }
0045
0046     second.handle: Rectangle {
0047         property bool horizontal: control.orientation === Qt.Horizontal
0048         x: control.leftPadding + (horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
0049         y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
0050         implicitWidth: 18
0051         implicitHeight: 18
0052         radius: width / 2
0053         border.color: control.activeFocus ? Kirigami.Theme.highlightColor :  Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast)
0054         color: Kirigami.Theme.backgroundColor
0055         Rectangle {
0056             z: -1
0057             x: 1
0058             y: 1
0059             width: parent.width
0060             height: parent.height
0061             radius: width / 2
0062             color: Qt.rgba(0, 0, 0, 0.15)
0063         }
0064     }
0065
0066     background: Rectangle {
0067         readonly property bool horizontal: control.orientation === Qt.Horizontal
0068         implicitWidth: horizontal ? 200 : 6
0069         implicitHeight: horizontal ? 6 : 200
0070         width: horizontal ? control.availableWidth : implicitWidth
0071         height: horizontal ? implicitHeight : control.availableHeight
0072         radius: Math.round(Math.min(width / 2, height / 2))
0073         color: Qt.alpha(Kirigami.Theme.textColor, 0.3)
0074         anchors.centerIn: parent
0075
0076         Rectangle {
0077             x: parent.horizontal
0078                 ? (LayoutMirroring.enabled
0079                    ? parent.width - width - control.first.position * parent.width
0080                    : control.first.position * parent.width)
0081                 : 0
0082             y: parent.horizontal ? 0 : control.second.visualPosition * parent.height + 6
0083             width: parent.horizontal ? control.second.position * parent.width - control.first.position * parent.width - 6 : 6
0084             height: parent.horizontal ? 6 : control.second.position * parent.height - control.first.position * parent.height - 6
0085             color: Kirigami.Theme.highlightColor
0086         }
0087     }
0088 }