mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-08 20:58:40 +00:00
121 lines
4.1 KiB
Text
121 lines
4.1 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.0 OR LicenseRef-Slint-commercial
|
|
|
|
|
|
import { Palette, Elevation } from "styling.slint";
|
|
|
|
// Allows to select a value from a range of values.
|
|
export component Slider {
|
|
callback changed(float /* value */);
|
|
|
|
in property <float> maximum: 100;
|
|
in property <bool> enabled <=> i-touch-area.enabled;
|
|
in property <float> minimum: 0;
|
|
out property <bool> has-focus: i-focus-scope.has-focus;
|
|
in-out property <float> value;
|
|
|
|
min-height: 20px;
|
|
|
|
accessible-role: slider;
|
|
accessible-value: root.value;
|
|
accessible-value-minimum: root.minimum;
|
|
accessible-value-maximum: root.maximum;
|
|
accessible-value-step: (root.maximum - root.minimum) / 100;
|
|
|
|
i-background := Rectangle {
|
|
background: Palette.surface-variant;
|
|
opacity: 0.38;
|
|
y: (parent.height - self.height) / 2;
|
|
width: 100%;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
i-track := Rectangle {
|
|
background: Palette.primary;
|
|
x: i-background.x;
|
|
y: (parent.height - self.height) / 2;
|
|
width: i-handle.x + (i-handle.width / 2);
|
|
height: i-background.height;
|
|
border-radius: i-background.border-radius;
|
|
}
|
|
|
|
i-state-layer := Rectangle {
|
|
opacity: 0;
|
|
background: Palette.primary;
|
|
x: i-handle.x - (self.width - i-handle.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: max(self.width, self.height) / 2;
|
|
|
|
animate opacity { duration: 250ms; easing: ease; }
|
|
}
|
|
|
|
i-handle := Rectangle {
|
|
background: Palette.primary;
|
|
x: (parent.width - i-handle.width) * (root.value - root.minimum) / (root.maximum - root.minimum);
|
|
y: (parent.height - self.height) / 2;
|
|
width: root.height;
|
|
height: root.height;
|
|
border-radius: max(self.width, self.height) / 2;
|
|
drop-shadow-color: Palette.shadow;
|
|
drop-shadow-blur: Elevation.level1;
|
|
drop-shadow-offset-y: 1px;
|
|
|
|
animate drop-shadow-blur { duration: 250ms; easing: ease; }
|
|
}
|
|
|
|
i-touch-area := TouchArea {
|
|
property <float> pressed-value;
|
|
property <bool> i-handle-hover: self.has-hover && self.mouse-x >= i-handle.x && self.mouse-x <= i-handle.x + i-handle.width
|
|
&& self.mouse-y >= i-handle.y && self.mouse-y <= i-handle.y + i-handle.height;
|
|
pointer-event(event) => {
|
|
if (event.button == PointerEventButton.left && event.kind == PointerEventKind.down) {
|
|
self.pressed-value = root.value;
|
|
}
|
|
}
|
|
moved => {
|
|
if (self.enabled && self.pressed) {
|
|
root.value = max(root.minimum, min(root.maximum,
|
|
self.pressed-value + (i-touch-area.mouse-x - i-touch-area.pressed-x) * (root.maximum - root.minimum) / (root.width - i-handle.width)));
|
|
root.changed(root.value);
|
|
}
|
|
}
|
|
}
|
|
|
|
i-focus-scope := FocusScope {
|
|
x: 0;
|
|
width: 0px;
|
|
|
|
key-pressed(event) => {
|
|
if (self.enabled && event.text == Key.RightArrow) {
|
|
root.value = Math.min(root.value + 1, root.maximum);
|
|
accept
|
|
} else if (self.enabled && event.text == Key.LeftArrow) {
|
|
root.value = Math.max(root.value - 1, root.minimum);
|
|
accept
|
|
} else {
|
|
reject
|
|
}
|
|
}
|
|
}
|
|
|
|
states [
|
|
disabled when !root.enabled : {
|
|
i-handle.background: Palette.on-surface;
|
|
i-handle.drop-shadow-blur: Elevation.level0;
|
|
i-track.background: Palette.on-surface;
|
|
i-background.background: Palette.on-surface;
|
|
root.opacity: 0.38;
|
|
}
|
|
pressed when (i-touch-area.pressed && i-touch-area.i-handle-hover) || i-focus-scope.has-focus : {
|
|
i-state-layer.opacity: 0.12;
|
|
i-handle.drop-shadow-blur: Elevation.level0;
|
|
}
|
|
hover when i-touch-area.i-handle-hover : {
|
|
i-state-layer.background: Palette.on-surface;
|
|
i-state-layer.opacity: 0.08;
|
|
}
|
|
]
|
|
}
|