slint/internal/compiler/widgets/material-base/slider.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 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 <Orientation> orientation: horizontal;
    private property<bool> vertical: orientation == Orientation.vertical;
    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-width: vertical ? 20px : 0px;
    min-height: 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;

    i-background := Rectangle {
        background: Palette.surface-variant;
        opacity: 0.38;
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        width: vertical ? 4px : parent.width;
        height: vertical ? parent.height : 4px;
        border-radius: 2px;
    }

    i-track := Rectangle {
        background: Palette.primary;
        x: vertical ? (parent.width - self.width) / 2 : i-background.x;
        y: vertical ? i-background.y : (parent.height - self.height) / 2;
        width: vertical? i-background.width : i-handle.x + (i-handle.width / 2);
        height: vertical? i-handle.y + (i-handle.height / 2) : i-background.height;
        border-radius: i-background.border-radius;
    }

    i-state-layer := Rectangle {
        opacity: 0;
        background: Palette.primary;
        x: vertical ? (parent.width - self.width) / 2 : i-handle.x - (self.width - i-handle.width) / 2;
        y: 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: Palette.primary;
        x: vertical ? (parent.width - self.width) / 2 : (parent.width - i-handle.width) * (root.value - root.minimum) / (root.maximum - root.minimum);
        y: vertical ? (parent.height - i-handle.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2;
        width: vertical ? root.width : root.height;
        height: vertical ? root.width : 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 (!vertical && 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);
            }
            if (vertical && self.enabled && self.pressed) {
                root.value = max(root.minimum, min(root.maximum,
                    self.pressed-value + (i-touch-area.mouse-y - i-touch-area.pressed-y) * (root.maximum - root.minimum) / (root.height - i-handle.height)));
                root.changed(root.value);
            }
        }
    }

    i-focus-scope := FocusScope {
        x: 0;
        y: 0;
        width: 0px;
        height: 0px;

        key-pressed(event) => {
            if (!vertical && self.enabled && event.text == Key.RightArrow) {
                root.value = Math.min(root.value + 1, root.maximum);
                accept
            } else if (!vertical && self.enabled && event.text == Key.LeftArrow) {
                root.value = Math.max(root.value - 1, root.minimum);
                accept
            } else if (vertical && self.enabled && event.text == Key.DownArrow) {
                root.value = Math.min(root.value + 1, root.maximum);
                accept
            } else if (vertical && self.enabled && event.text == Key.UpArrow) {
                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;
        }
    ]
}