---
title: Slider
description: Slider API.
---

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.