Slider

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

<CodeSnippetMD imagePath="/src/assets/generated/slider.png" scale="3" imageWidth="300" imageHeight="200" imageAlt=""> ```slint import { Slider } from "@material"; export component Example inherits Window { width: 200px; height: 100px; background: transparent; Slider { x: 5px; value: 50; width: parent.width; } } ``` </CodeSnippetMD>

Use a Slider to allow the user to select a value from a range by moving a thumb along a track. This is useful for adjusting settings such as volume, brightness, or any other scalar value within a specified range.

Properties

has-focus

<SlintProperty propName="has-focus" typeName="bool"> Whether the component has focus. </SlintProperty>

stop-count

<SlintProperty propName="stop-count" typeName="float" defaultValue="0"> The number of discrete divisions in the slider range. If greater than 0, the slider will snap to these divisions. </SlintProperty>

enabled

<SlintProperty propName="enabled" typeName="bool" defaultValue="true"> Whether the slider is enabled. When false, the slider cannot be interacted with. </SlintProperty>

maximum

<SlintProperty propName="maximum" typeName="float" defaultValue="100"> The maximum value of the slider. </SlintProperty>

minimum

<SlintProperty propName="minimum" typeName="float" defaultValue="0"> The minimum value of the slider. </SlintProperty>

value

<SlintProperty propName="value" typeName="float" propertyVisibility="in-out"> The current value of the slider. </SlintProperty>

Callbacks

released(value: float)

Invoked when the slider is released.

value_changed(value: float)

Invoked when the slider value changes.

Functions

clear-focus()

Clears the focus from the component.

focus()

Focuses the component.