mirror of
https://github.com/slint-ui/slint.git
synced 2025-09-28 21:04:47 +00:00
0cfeec1a31
Updated the version from 1.1 to 1.2 Renamed the header to "Slint Royalty-free Desktop, Mobile, and Web Applications License" Added definition of "Mobile Application" and grant of right Moved "Limitations" to 3rd section and "License Conditions - Attributions" to 2nd section Added flexibility to choose between showing "MadeWithSlint" as a dialog/splash screen or on a public webpage Moved the para on copyright notices to section under "Limitations"
100 lines
4 KiB
Text
100 lines
4 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.2 OR LicenseRef-Slint-commercial
|
|
|
|
|
|
import { MaterialPalette, Elevation } from "styling.slint";
|
|
import { SliderBase } from "../common/slider-base.slint";
|
|
|
|
// Allows to select a value from a range of values.
|
|
export component Slider {
|
|
in property <Orientation> orientation <=> i-base.orientation;
|
|
in property <float> maximum <=> i-base.maximum;
|
|
in property <bool> enabled <=> i-base.enabled;
|
|
in property <float> minimum <=> i-base.minimum;
|
|
out property <bool> has-focus <=> i-base.has-focus;
|
|
in-out property <float> value <=> i-base.value;
|
|
|
|
callback changed <=> i-base.changed;
|
|
callback released <=> i-base.released;
|
|
|
|
min-width: i-base.vertical ? 20px : 0px;
|
|
min-height: i-base.vertical ? 0px : 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;
|
|
forward-focus: i-base;
|
|
|
|
states [
|
|
disabled when !root.enabled : {
|
|
i-handle.background: MaterialPalette.control-foreground;
|
|
i-handle.drop-shadow-blur: Elevation.level0;
|
|
i-track.background: MaterialPalette.control-foreground;
|
|
i-background.background: MaterialPalette.control-foreground;
|
|
root.opacity: 0.38;
|
|
}
|
|
pressed when i-base.handle-pressed || i-base.has-focus : {
|
|
i-state-layer.opacity: 0.12;
|
|
i-handle.drop-shadow-blur: Elevation.level0;
|
|
}
|
|
hover when i-base.has-hover : {
|
|
i-state-layer.background: MaterialPalette.control-foreground;
|
|
i-state-layer.opacity: 0.08;
|
|
}
|
|
]
|
|
|
|
i-background := Rectangle {
|
|
background: MaterialPalette.control-background-variant;
|
|
opacity: 0.38;
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
width: i-base.vertical ? 4px : parent.width;
|
|
height: i-base.vertical ? parent.height : 4px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
i-track := Rectangle {
|
|
background: MaterialPalette.accent-background;
|
|
x: i-base.vertical ? (parent.width - self.width) / 2 : i-background.x;
|
|
y: i-base.vertical ? i-background.y : (parent.height - self.height) / 2;
|
|
width: i-base.vertical? i-background.width : i-handle.x + (i-handle.width / 2);
|
|
height: i-base.vertical? i-handle.y + (i-handle.height / 2) : i-background.height;
|
|
border-radius: i-background.border-radius;
|
|
}
|
|
|
|
i-state-layer := Rectangle {
|
|
opacity: 0;
|
|
background: MaterialPalette.accent-background;
|
|
x: i-base.vertical ? (parent.width - self.width) / 2 : i-handle.x - (self.width - i-handle.width) / 2;
|
|
y: i-base.vertical ? i-handle.y - (self.height - i-handle.height) / 2 : (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: MaterialPalette.accent-background;
|
|
x: i-base.vertical ? (parent.width - self.width) / 2 : (parent.width - i-handle.width) * (root.value - root.minimum) / (root.maximum - root.minimum);
|
|
y: i-base.vertical ? (parent.height - i-handle.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2;
|
|
width: i-base.vertical ? root.width : root.height;
|
|
height: i-base.vertical ? root.width : root.height;
|
|
border-radius: max(self.width, self.height) / 2;
|
|
drop-shadow-color: MaterialPalette.shadow;
|
|
drop-shadow-blur: Elevation.level1;
|
|
drop-shadow-offset-y: 1px;
|
|
|
|
animate drop-shadow-blur { duration: 250ms; easing: ease; }
|
|
}
|
|
|
|
i-base := SliderBase {
|
|
width: 100%;
|
|
height: 100%;
|
|
handle-x: i-handle.x;
|
|
handle-y: i-handle.y;
|
|
handle-width: i-handle.width;
|
|
handle-height: i-handle.height;
|
|
}
|
|
}
|