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.1 OR LicenseRef-Slint-commercial

import { FluentPalette } from "styling.slint";
import { SliderBase } from "../common/slider-base.slint";

export component Slider {
    in property <Orientation> orientation <=> i-base.orientation;
    in property <float> maximum <=> i-base.maximum;
    in property <float> minimum <=> i-base.minimum;
    in property <bool> enabled <=> i-base.enabled;
    out property <bool> has-focus: i-base.has-focus;
    in-out property <float> value <=> i-base.value;

    callback changed <=> i-base.changed;

    min-width: i-base.vertical ? 20px : 0px;
    min-height: i-base.vertical ? 0px : 20px;
    vertical-stretch: i-base.vertical ? 1 : 0;
    horizontal-stretch: i-base.vertical ? 0 : 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;
    forward-focus: i-base;

    states [
        disabled when !root.enabled : {
            i-track.background: FluentPalette.accent-disabled;
            i-rail.background: FluentPalette.accent-disabled;
            i-thumb-inner.background: FluentPalette.accent-disabled;
        }
        pressed when i-base.handle-pressed || i-base.has-focus : {
            i-thumb-inner.width: 10px;
            i-thumb-inner.background: FluentPalette.tertiary-accent-background;
            i-thumb.border-color: FluentPalette.border;
        }
        hover when i-base.has-hover : {
            i-thumb-inner.width: 14px;
            i-thumb-inner.background: FluentPalette.secondary-accent-background;
        }
    ]

    i-rail := Rectangle {
        width: i-base.vertical ? 4px : parent.width;
        height: i-base.vertical ? parent.height : 4px;
        background: FluentPalette.border;
        border-radius: 2px;
    }

    i-track := Rectangle {
        x: i-base.vertical ? (parent.width - self.width) / 2 : 0;
        y: i-base.vertical ? 0 : (parent.height - self.height) / 2;
        width: i-base.vertical ? i-rail.width : i-thumb.x + (i-thumb.width / 2);
        height: i-base.vertical ? i-thumb.y + (i-thumb.height / 2) : i-rail.height;
        background: FluentPalette.accent-background;
        border-radius: i-rail.border-radius;
    }

    i-thumb := Rectangle {
        x: i-base.vertical ? (parent.width - self.width) / 2 : (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum);
        y: i-base.vertical ? (parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2;
        width: 20px;
        height: self.width;
        border-radius: 10px;
        background: FluentPalette.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: FluentPalette.circle-border;
        }

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

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

    i-base := SliderBase {
        width: 100%;
        height: 100%;
        handle-x: i-thumb.x;
        handle-y: i-thumb.y;
        handle-width: i-thumb.width;
        handle-height: i-thumb.height;
    }
}