SpinBox - Slint — ContextQMD

import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro'; import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';

<CodeSnippetMD imagePath="/src/assets/generated/spinbox-example.png" imageWidth="200" imageHeight="200" imageAlt='spinbox example'> ```slint playground import { SpinBox, VerticalBox } from "std-widgets.slint"; export component Example inherits Window { width: 200px; height: 50px;

VerticalBox {
    alignment: center;

    SpinBox {
        value: 42;
    }
}

}

</CodeSnippetMD>

## Properties

### enabled
<SlintProperty propName="enabled" typeName="bool" defaultValue="true">
You can't interact with the spinbox if enabled is false.
</SlintProperty>

### has-focus
<SlintProperty propName="has-focus" typeName="bool" defaultValue="false" propertyVisibility="out">
Set to true when the spinbox currently has the focus.
</SlintProperty>

### value
<SlintProperty propName="value" typeName="int" defaultValue="0" propertyVisibility="in-out">
The value. Defaults to the minimum.
```slint "value: 50;"
SpinBox {
    value: 50;
}

</SlintProperty>

minimum

<SlintProperty propName="minimum" typeName="int" defaultValue="0"> The minimum value. ```slint "minimum: 10;" SpinBox { minimum: 10; value: 11; } ``` </SlintProperty>

maximum

<SlintProperty propName="maximum" typeName="int" defaultValue="100"> The maximum value. ```slint "maximum: 10;" SpinBox { maximum: 10; value: 9; } ``` </SlintProperty>

read-only

<SlintProperty propName="read-only" typeName="bool" defaultValue="false"> If true, the user can't modify the value. </SlintProperty>

step-size

<SlintProperty propName="step-size" typeName="int" defaultValue="1"> The size that is used on increment or decrement of `value`. </SlintProperty>

horizontal-alignment

<SlintProperty propName="horizontal-alignment" typeName="enum" enumName="TextHorizontalAlignment" defaultValue="left"> The horizontal alignment of the text. </SlintProperty>

Callbacks

edited(int)

Emitted when the value has changed because the user modified it

slint

SpinBox {
    edited(value) => {
        debug("New value: ", value);
    }
}