ConsoleEmulatorAddProbes/ui/emulator/components/SliderBar.qml

import QtQuick 2.0
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13

import "qrc:/theme"
import "qrc:/const"

Item {
	id: main
	property var color: Theme.current.green
	property var colorDeep: Theme.current.greenDeep
	property var sliderSize: Const.sliderHeight
	property var backgroundLenght: Const.sliderWidth
	property bool flip: false
	property var value: control.value

	implicitHeight: sliderSize
	width: backgroundLenght

	Slider {
		id: control
		width: (4 / 5) * parent.width
		height: Const.sliderThickness
		x: parent.width - width
		y: 0

		from: flip ? -1 : 1
		to: flip ? -5 : 5
		stepSize: 1
		value: flip ? -1 : 1
		snapMode: Slider.SnapOnRelease

		transform: Rotation {
			origin {
				x: control.width / 2 - main.width / 10
				y: control.height / 2
			}

			axis {
				z: 0
				x: 0
				y: 1
			}

			angle: flip ? 180 : 0
		}

		background: Item {
			id: controlBackground
			width: main.width
			height: parent.height
			x:  - parent.x

			Item {
				id: backgroundObject
				width: parent.width
				height: parent.height

				Rectangle {
					id: backgroundArea
					width: parent.width
					height: parent.height
					radius: height / 2
					color: "pink"
				}

				Item {
					id: backgroundGrad
					implicitWidth: parent.implicitWidth
					implicitHeight: parent.implicitHeight
					anchors.fill: parent

					layer.enabled: true
					layer.effect: OpacityMask {
						maskSource: backgroundArea
					}

					Rectangle {
						width: parent.width
						height: parent.height
						color: "transparent"

						LinearGradient {
							anchors.fill: parent
							start: Qt.point(parent.width / 2 , parent.height)
							end: Qt.point(0, 0)
							gradient: Gradient {
								GradientStop {
									position: 0
									color: Theme.current.none
								}

								GradientStop {
									position: 1
									color: Theme.current.noneDeep
								}
							}
						}
					}
				}

				Rectangle {
					id: progressArea
					width: (control.visualPosition * parent.width * 4 / 5) + (parent.width / 5)
					height: parent.height
					radius: height / 2
					color: "pink"
				}

				Item {
					id: progressGrad
					anchors.fill: progressArea

					layer.enabled: true
					layer.effect: OpacityMask {
						maskSource: progressArea
					}

					Rectangle {
						width: parent.width
						height: parent.height
						color: "transparent"

						LinearGradient {
							anchors.fill: parent
							start: Qt.point(parent.width / 2 , parent.height)
							end: Qt.point(0, 0)
							gradient: Gradient {
								GradientStop {
									position: 0
									color: main.color
								}

								GradientStop {
									position: 1
									color: main.colorDeep
								}
							}
						}
					}
				}
			}

			DropShadow {
				id: dropDown
				anchors.fill: backgroundObject
				source: backgroundObject
				horizontalOffset: 3
				verticalOffset: 3
				radius: 4
				samples: 8
				color: Theme.current.light
			}

			DropShadow {
				id: dropUp
				anchors.fill: backgroundObject
				source: backgroundObject
				horizontalOffset: - 3
				verticalOffset: - 3
				radius: 4
				samples: 8
				color: Theme.current.light
			}

			InnerShadow {
				id: inner
				anchors.fill: backgroundObject
				source: backgroundObject
				horizontalOffset: 3
				verticalOffset: 3
				radius: 3
				samples: 6
				smooth: true
				color: Theme.current.lightShadow
			}
		}

		handle: KnobImage {
			id: knob
			x: control.leftPadding + (control.visualPosition * control.availableWidth) - width / 2
			y: control.topPadding + control.availableHeight / 2 - height / 2
			implicitWidth: sliderSize
			implicitHeight: sliderSize
			radius: implicitHeight / 2

			Item {
				width: parent.width
				height: parent.height
				anchors.centerIn: knob

				Text {
					horizontalAlignment: Text.horizontalCenter
					text: control.value
					color: Theme.current.text
					anchors.verticalCenter: parent.verticalCenter
					anchors.horizontalCenter: parent.horizontalCenter
				}

				transform: Rotation {
					origin {
						x: knob.width / 2
						y: knob.height / 2
					}

					axis {
						z: 0
						x: 0
						y: 1
					}

					angle: flip ? 180 : 0
				}
			}
		}
	}
}