Slider - 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/slider-example.png" imageWidth="200" imageHeight="200" imageAlt='slider example'> ```slint import { Slider, VerticalBox } from "std-widgets.slint"; export component Example inherits Window { width: 200px; height: 40px;

VerticalBox {
    alignment: center;

    Slider {
        value: 42;
    }
}

}

</CodeSnippetMD>

## Properties

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

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

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

</SlintProperty>

step

<SlintProperty propName="step" typeName="float" defaultValue="1"> The change step when pressing arrow key. ```slint "step: 1;" Slider { step: 1; } ``` </SlintProperty>

minimum

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

maximum

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

orientation

<SlintProperty propName="orientation" typeName="enum" enumName="Orientation" defaultValue="horizontal"> Describes the orientation of the Slider, vertical or horizontal. </SlintProperty>

Callbacks

changed(float)

The value was changed

slint

Slider {
    changed(value) => {
        debug("New value: ", value);
    }
}

released(float)

Invoked when the user completed changing the slider's value, i.e. when the press on the knob was released or the arrow keys lifted.

slint

Slider {
    released(position) => {
        debug("Released at position: ", position);
    }
}