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 { FluentPalette } 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 track.background: FluentPalette.accent-disabled;
34 rail.background: FluentPalette.accent-disabled;
35 thumb-inner.background: FluentPalette.accent-disabled;
36 }
37 pressed when base.handle-pressed || base.has-focus : {
38 thumb-inner.width: 10px;
39 thumb-inner.background: FluentPalette.tertiary-accent-background;
40 thumb.border-color: FluentPalette.border;
41 }
42 hover when base.has-hover : {
43 thumb-inner.width: 14px;
44 thumb-inner.background: FluentPalette.secondary-accent-background;
45 }
46 ]
47
48 rail := Rectangle {
49 width: base.vertical ? 4px : parent.width;
50 height: base.vertical ? parent.height : 4px;
51 background: FluentPalette.border;
52 border-radius: 2px;
53 }
54
55 track := Rectangle {
56 x: base.vertical ? (parent.width - self.width) / 2 : 0;
57 y: base.vertical ? 0 : (parent.height - self.height) / 2;
58 width: base.vertical ? rail.width : thumb.x + (thumb.width / 2);
59 height: base.vertical ? thumb.y + (thumb.height / 2) : rail.height;
60 background: FluentPalette.accent-background;
61 border-radius: rail.border-radius;
62 }
63
64 thumb := Rectangle {
65 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);
66 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;
67 width: 20px;
68 height: self.width;
69 border-radius: 10px;
70 background: FluentPalette.control-solid;
71
72 thumb-border := Rectangle {
73 x: (parent.width - self.width) / 2;
74 y: (parent.height - self.height) / 2;
75 width: 21px;
76 height: self.width;
77 border-radius: 10.5px;
78 border-width: 1px;
79 border-color: FluentPalette.circle-border;
80 }
81
82 thumb-inner := Rectangle {
83 width: 12px;
84 height: self.width;
85 border-radius: self.width / 2;
86 background: FluentPalette.accent-background;
87
88 animate background, width { duration: 150ms; }
89 }
90 }
91
92 base := SliderBase {
93 width: 100%;
94 height: 100%;
95 handle-x: thumb.x;
96 handle-y: thumb.y;
97 handle-width: thumb.width;
98 handle-height: thumb.height;
99 }
100}
101