Skip to main content

Slider

The Slider control presents a numeric value as the relative position of a slider thumb along the length of a track. The position is relative to the Maximum and Minimum values you configure.

You can change the value by dragging the thumb, clicking on the track, using the arrow keys, or scrolling the mouse wheel. The slider is useful whenever you want to let users pick a value from a continuous or stepped range, such as volume, brightness, or zoom level.

Useful properties​

You will probably use these properties most often:

PropertyTypeDescription
MinimumdoubleSets the lower bound of the range. Default is 0.
MaximumdoubleSets the upper bound of the range. Default is 100.
ValuedoubleGets or sets the current slider value.
SmallChangedoubleThe amount the value changes per arrow-key press. Default is 1.
LargeChangedoubleThe amount the value changes per track click or Page key press. Default is 10.
OrientationOrientationHorizontal (default) or Vertical.

Example​

In this example the slider value is displayed in the text block above it, using binding to a control.

info

To review how to bind one control to another, see the guide Binding to controls.

Here the maximum and minimum values are left at their defaults (0 and 100 respectively).

<StackPanel xmlns="https://github.com/avaloniaui"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Margin="20">
  <TextBlock Text="{Binding #slider.Value}"
              HorizontalAlignment="Center"/>
  <Slider x:Name="slider" />
</StackPanel>
Preview
Loading Avalonia Preview...

Tick marks and snapping​

Use TickFrequency and IsSnapToTickEnabled to restrict the slider to discrete steps. This is helpful when you want users to pick from evenly spaced values rather than any point along the range.

<Slider Minimum="0" Maximum="100"
        TickFrequency="10"
        IsSnapToTickEnabled="True"
        TickPlacement="BottomRight" />

The TickPlacement property controls where tick marks appear relative to the track:

ValueDescription
NoneNo tick marks are shown (default).
TopLeftTick marks appear above a horizontal slider or to the left of a vertical slider.
BottomRightTick marks appear below a horizontal slider or to the right of a vertical slider.
OutsideTick marks appear on both sides of the track.

Vertical slider​

Set the Orientation property to Vertical to render the slider vertically. When you use a vertical slider, make sure you give it an explicit Height so it has room to display.

<Slider Orientation="Vertical" Height="200"
        Minimum="0" Maximum="100" Value="30" />

Reversing the direction​

Set IsDirectionReversed to True if you want the maximum value at the left (or bottom for vertical sliders) instead of the right (or top).

<Slider Minimum="0" Maximum="100"
        IsDirectionReversed="True" />

Binding to a view model​

You can bind Value, Minimum, and Maximum to properties on your view model. The following example uses the MVVM Community Toolkit source generators:

<Slider Maximum="{Binding MaxDamage}" Value="{Binding Damage}" />
[ObservableProperty]
private double _damage;

[ObservableProperty]
private double _maxDamage = 9999;

All properties​

PropertyTypeDescription
MinimumdoubleLower bound of the range. Default is 0.
MaximumdoubleUpper bound of the range. Default is 100.
ValuedoubleCurrent slider value.
SmallChangedoubleValue change per arrow-key press. Default is 1.
LargeChangedoubleValue change per track click or Page key press. Default is 10.
TickFrequencydoubleInterval between tick marks.
IsSnapToTickEnabledboolWhen true, the thumb snaps to the nearest tick. Default is false.
TickPlacementTickPlacementWhere to show tick marks: None, TopLeft, BottomRight, or Outside.
OrientationOrientationHorizontal (default) or Vertical.
IsDirectionReversedboolWhen true, reverses the increasing-value direction. Default is false.

See also​

On this page