mirror of
https://github.com/slint-ui/slint.git
synced 2025-07-24 05:26:29 +00:00
100 lines
3.7 KiB
Text
100 lines
3.7 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
|
|
|
|
import { FluentPalette } from "styling.slint";
|
|
import { SliderBase } from "../common/slider-base.slint";
|
|
|
|
export component Slider {
|
|
in property <Orientation> orientation <=> base.orientation;
|
|
in property <float> maximum <=> base.maximum;
|
|
in property <float> minimum <=> base.minimum;
|
|
in property <float> step <=> base.step;
|
|
in property <bool> enabled <=> base.enabled;
|
|
out property <bool> has-focus: base.has-focus;
|
|
in-out property <float> value <=> base.value;
|
|
|
|
callback changed <=> base.changed;
|
|
callback released <=> base.released;
|
|
|
|
min-width: base.vertical ? 20px : 0px;
|
|
min-height: base.vertical ? 0px : 20px;
|
|
vertical-stretch: base.vertical ? 1 : 0;
|
|
horizontal-stretch: base.vertical ? 0 : 1;
|
|
accessible-role: slider;
|
|
accessible-enabled: root.enabled;
|
|
accessible-value: root.value;
|
|
accessible-value-minimum: root.minimum;
|
|
accessible-value-maximum: root.maximum;
|
|
accessible-value-step: min(root.step, (root.maximum - root.minimum) / 100);
|
|
forward-focus: base;
|
|
|
|
states [
|
|
disabled when !root.enabled : {
|
|
track.background: FluentPalette.accent-disabled;
|
|
rail.background: FluentPalette.accent-disabled;
|
|
thumb-inner.background: FluentPalette.accent-disabled;
|
|
}
|
|
pressed when base.handle-pressed || base.has-focus : {
|
|
thumb-inner.width: 10px;
|
|
thumb-inner.background: FluentPalette.tertiary-accent-background;
|
|
thumb.border-color: FluentPalette.border;
|
|
}
|
|
hover when base.has-hover : {
|
|
thumb-inner.width: 14px;
|
|
thumb-inner.background: FluentPalette.secondary-accent-background;
|
|
}
|
|
]
|
|
|
|
rail := Rectangle {
|
|
width: base.vertical ? 4px : parent.width;
|
|
height: base.vertical ? parent.height : 4px;
|
|
background: FluentPalette.border;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
track := Rectangle {
|
|
x: base.vertical ? (parent.width - self.width) / 2 : 0;
|
|
y: base.vertical ? 0 : (parent.height - self.height) / 2;
|
|
width: base.vertical ? rail.width : thumb.x + (thumb.width / 2);
|
|
height: base.vertical ? thumb.y + (thumb.height / 2) : rail.height;
|
|
background: FluentPalette.accent-background;
|
|
border-radius: rail.border-radius;
|
|
}
|
|
|
|
thumb := Rectangle {
|
|
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);
|
|
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;
|
|
width: 20px;
|
|
height: self.width;
|
|
border-radius: 10px;
|
|
background: FluentPalette.control-solid;
|
|
|
|
thumb-border := Rectangle {
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
width: 21px;
|
|
height: self.width;
|
|
border-radius: 10.5px;
|
|
border-width: 1px;
|
|
border-color: FluentPalette.circle-border;
|
|
}
|
|
|
|
thumb-inner := Rectangle {
|
|
width: 12px;
|
|
height: self.width;
|
|
border-radius: self.width / 2;
|
|
background: FluentPalette.accent-background;
|
|
|
|
animate background, width { duration: 150ms; }
|
|
}
|
|
}
|
|
|
|
base := SliderBase {
|
|
width: 100%;
|
|
height: 100%;
|
|
handle-x: thumb.x;
|
|
handle-y: thumb.y;
|
|
handle-width: thumb.width;
|
|
handle-height: thumb.height;
|
|
}
|
|
}
|