1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
3
4import { CupertinoPalette } from "styling.slint";
5import { SliderBase } from "../common/slider-base.slint";
6
7export component Slider {
8 in property <Orientation> orientation <=> base.orientation;
9 in property <float> maximum <=> base.maximum;
10 in property <float> minimum <=> base.minimum;
11 in property <float> step <=> base.step;
12 in property <bool> enabled <=> base.enabled;
13 out property <bool> has-focus <=> base.has-focus;
14 in-out property <float> value <=> base.value;
15
16 callback changed <=> base.changed;
17 callback released <=> base.released;
18
19 min-width: base.vertical ? 20px : 0px;
20 min-height: base.vertical ? 0px : 20px;
21 vertical-stretch: base.vertical ? 1 : 0;
22 horizontal-stretch: base.vertical ? 0 : 1;
23 accessible-role: slider;
24 accessible-enabled: root.enabled;
25 accessible-value: root.value;
26 accessible-value-minimum: root.minimum;
27 accessible-value-maximum: root.maximum;
28 accessible-value-step: min(root.step, (root.maximum - root.minimum) / 100);
29 forward-focus: base;
30
31 states [
32 disabled when !root.enabled : {
33 root.opacity: 0.5;
34 }
35 pressed when base.handle-pressed || root.has-focus : {
36 thumb.background: CupertinoPalette.pressed;
37 }
38 ]
39
40 rail := Rectangle {
41 width: base.vertical ? 4px : parent.width;
42 height: base.vertical ? parent.height : 4px;
43 background: CupertinoPalette.alternate-control-background;
44 border-radius: 2px;
45
46 Rectangle {
47 border-width: 1px;
48 border-color: @radial-gradient(circle, #00000026, #00000000);
49 border-radius: parent.border-radius;
50 }
51 }
52
53 track := Rectangle {
54 x: base.vertical ? (parent.width - self.width) / 2 : 0;
55 y: base.vertical ? 0 : (parent.height - self.height) / 2;
56 width: base.vertical ? rail.width : thumb.x + (thumb.width / 2);
57 height: base.vertical ? thumb.y + (thumb.height / 2) : rail.height;
58 background: CupertinoPalette.accent-background;
59 border-radius: rail.border-radius;
60 }
61
62 thumb := Rectangle {
63 x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.width - self.width);
64 y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.height - self.height) : (parent.height - self.height) / 2;
65 width: 20px;
66 height: self.width;
67 border-radius: 10px;
68 background: CupertinoPalette.control-background-thumb;
69 drop-shadow-blur: 1px;
70 drop-shadow-offset-y: 0.25px;
71 drop-shadow-color: #0000003D;
72
73 animate background { duration: 150ms; easing: linear; }
74 }
75
76 base := SliderBase {
77 width: 100%;
78 height: 100%;
79 handle-x: thumb.x;
80 handle-y: thumb.y;
81 handle-width: thumb.width;
82 handle-height: thumb.height;
83 }
84}
85