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

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.0 OR LicenseRef-Slint-commercial

import { Palette } from "styling.slint";

export component Slider {
    callback changed(float /* value */);

    in property<float> maximum: 100;
    in property<float> minimum: 0;
    in property<bool> enabled <=> i-touch-area.enabled;
    out property<bool> has-focus: i-focus-scope.has-focus;
    in-out property<float> value;

    min-height: 20px;
    vertical-stretch: 0;
    horizontal-stretch: 1;
    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-rail := Rectangle {
        height: 4px;
        background: Palette.control-stroke;
        border-radius: 2px;
    }

    i-track := Rectangle {
        x: 0;
        height: i-rail.height;
        background: Palette.accent-default;
        border-radius: i-rail.border-radius;
        width: i-thumb.x + (i-thumb.width / 2);
    }

    i-thumb := Rectangle {
        x: (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum);
        width: 20px;
        height: self.width;
        border-radius: 10px;
        background: Palette.control-solid;

        i-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: Palette.circle-border;
        }

        i-thumb-inner := Rectangle {
            width: 12px;
            height: self.width;
            border-radius: self.width / 2;
            background: Palette.accent-default;

            animate background, width { duration: 150ms; }
        }
    }

    i-touch-area := TouchArea {
        property <float> pressed-value;

        width: parent.width;
        height: parent.height;

        pointer-event(event) => {
            if (event.button == PointerEventButton.left && event.kind == PointerEventKind.down) {
                self.pressed-value = root.value;
            }
        }

        moved => {
            if (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-thumb.width)));
                root.changed(root.value);
            }
        }
    }

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

        key-pressed(event) => {
            if (self.enabled && event.text == Key.RightArrow) {
                root.value = Math.min(root.value + 1, root.maximum);
                accept
            } else if (self.enabled && event.text == Key.LeftArrow) {
                root.value = Math.max(root.value - 1, root.minimum);
                accept
            } else {
                reject
            }
        }
    }

    states [
        disabled when !root.enabled : {
            i-track.background: Palette.accent-disabled;
            i-rail.background: Palette.accent-disabled;
            i-thumb-inner.background: Palette.accent-disabled;
        }
        pressed when ( i-touch-area.pressed &&  i-touch-area.has-hover) || i-focus-scope.has-focus : {
            i-thumb-inner.width: 10px;
            i-thumb-inner.background: Palette.accent-tertiary;
            i-thumb.border-color: Palette.control-stroke;
        }
        hover when i-touch-area.has-hover : {
            i-thumb-inner.width: 14px;
            i-thumb-inner.background: Palette.accent-secondary;
        }
    ]
}