Slider

Quick start

Use Slider when the user should set a numeric value by dragging a thumb or clicking along a track. It is a better fit than ScrollBar when the control represents a value such as volume, opacity, zoom, or a tuning parameter instead of a viewport moving through content.

Minimal horizontal slider

<Slider Width="240"
        Minimum="0"
        Maximum="100"
        Value="35" />

Vertical slider

<Slider Height="180"
        Orientation="Vertical"
        Minimum="-1"
        Maximum="1"
        Value="0.25" />

Styled slider

<Slider Width="280"
        Minimum="0"
        Maximum="1"
        Value="0.6"
        Background="#0F1720"
        TrackBrush="#2F475C"
        ThumbBrush="#76D0FF"
        BorderBrush="#4E6D85"
        TrackThickness="6"
        ThumbSize="18" />

Range model

Slider inherits the shared range model used by the framework's other range controls. Minimum, Maximum, and Value are always kept in a legal state, and the effective value is what drives thumb position, tick snapping, automation, and routed change notifications.

<Slider Width="260"
        Minimum="-200"
        Maximum="200"
        Value="0" />

That slider places 0 in the center of the range. Moving the thumb right produces positive values. Moving it left produces negative values.

Interaction model

Slider supports both pointer interaction and keyboard commands. Pointer input is routed through the thumb, track, and repeat-button regions inside the template. Keyboard input is exposed through command bindings so arrow keys, page keys, and home/end follow slider semantics automatically when the control has focus.

var slider = new Slider
{
    Width = 260f,
    Minimum = 0f,
    Maximum = 1f,
    Value = 0.5f,
    SmallChange = 0.05f,
    LargeChange = 0.1f,
    IsMoveToPointEnabled = true
};

slider.ValueChanged += (_, _) =>
{
    selectionOpacity = slider.Value;
};

Ticks and snapping

The control supports both frequency-based ticks and explicit tick collections through TickFrequency, Ticks, and IsSnapToTickEnabled. Snapping is applied after value coercion, so direct assignment, keyboard input, and pointer interaction all land on the nearest effective tick when snapping is enabled.

<StackPanel>
  <TextBlock Text="Selection opacity" Margin="0,0,0,6" />
  <Slider Width="260"
          Minimum="0.15"
          Maximum="1"
          Value="0.65"
          TickFrequency="0.05"
          TickPlacement="Both"
          IsSnapToTickEnabled="True"
          AutoToolTipPlacement="TopLeft" />
</StackPanel>

This mirrors the pattern used in the rich text demo surface, where a slider snaps the editor's selection opacity to predictable increments.

Selection range and direction

Slider can visualize a selected interval separately from the current thumb value. It can also reverse its direction without changing the numeric range itself, which is useful for alternative scrubbers and mirrored layouts.

<Slider Width="280"
        Minimum="0"
        Maximum="100"
        Value="35"
        TickPlacement="Both"
        Ticks="0,10,20,40,60,80,100"
        IsSnapToTickEnabled="True"
        IsSelectionRangeEnabled="True"
        SelectionStart="20"
        SelectionEnd="80"
        AutoToolTipPlacement="TopLeft" />

Template structure

Slider is a templated control. The default template is built around a root grid, a shared Track, a Thumb, track-side repeat regions, optional tick bars, and an optional selection range element. Custom templates can restyle the control, but they must preserve the required parts and their ownership rules.

• PART_Thumb, PART_DecreaseButton, PART_IncreaseButton, and PART_SelectionRange must live inside PART_Track.
• The track uses fixed-thumb slider layout rather than viewport-sized scrollbar layout.
• Tick bars sit outside the track and render against the same range, direction, and reserved thumb space.

Template example

<ControlTemplate TargetType="Slider">
  <Grid x:Name="PART_Root">
    <TickBar x:Name="PART_TopTickBar" />
    <Track x:Name="PART_Track">
      <Border x:Name="PART_SelectionRange" />
      <RepeatButton x:Name="PART_DecreaseButton" />
      <Thumb x:Name="PART_Thumb" />
      <RepeatButton x:Name="PART_IncreaseButton" />
    </Track>
    <TickBar x:Name="PART_BottomTickBar" />
  </Grid>
</ControlTemplate>

Layout and sizing

Slider participates in normal layout, but it also carries a few minimum expectations so the thumb and track remain usable when the parent does not constrain it tightly.

<StackPanel Orientation="Horizontal">
  <Slider Width="240"
          Height="30"
          Minimum="0"
          Maximum="100"
          Value="35" />

  <Slider Width="28"
          Height="180"
      Margin="16,0,0,0"
          Orientation="Vertical"
          Minimum="0"
          Maximum="100"
          Value="65" />
</StackPanel>

Property and event reference

Patterns and examples

Volume slider

<StackPanel>
  <TextBlock Text="Master volume" Margin="0,0,0,6" />
  <Slider Width="280"
          Minimum="0"
          Maximum="1"
          Value="0.72"
          TickFrequency="0.05"
          IsSnapToTickEnabled="True" />
</StackPanel>

Keyboard-friendly range selector

<Slider Width="280"
        Minimum="0"
        Maximum="100"
        Value="40"
        SmallChange="5"
        LargeChange="20" />

When this slider has focus, arrow keys step by 5, page keys step by 20, and home/end jump to the ends of the range.

Jump-to-position scrubber

<Slider Width="420"
        Minimum="0"
        Maximum="300"
        Value="42"
        LargeChange="15"
        IsMoveToPointEnabled="True"
        AutoToolTipPlacement="BottomRight"
        TrackThickness="5"
        ThumbSize="16" />

Selection-range slider

<Slider Width="280"
        Minimum="0"
        Maximum="100"
        Value="35"
        TickPlacement="Both"
        Ticks="0,10,20,40,60,80,100"
        IsSnapToTickEnabled="True"
        IsSelectionRangeEnabled="True"
        SelectionStart="20"
        SelectionEnd="80" />

Vertical parameter control

<Border Width="48"
        Height="220"
        Padding="10"
        Background="#111923"
        BorderBrush="#34495B"
        BorderThickness="1">
  <Slider Width="28"
          Height="200"
          Orientation="Vertical"
          Minimum="0"
          Maximum="100"
          Value="80"
          Background="#111923"
          TrackBrush="#3E556B"
          ThumbBrush="#F0B45A"
          BorderBrush="#5B748C" />
</Border>

Code-driven setup

var opacitySlider = new Slider
{
    Width = 260f,
    Minimum = 0.15f,
    Maximum = 1f,
    TickFrequency = 0.05f,
    IsSnapToTickEnabled = true,
    Value = 0.65f,
    Background = new Color(15, 23, 32),
    TrackBrush = new Color(47, 71, 92),
    ThumbBrush = new Color(118, 208, 255),
    BorderBrush = new Color(78, 109, 133)
};

opacitySlider.ValueChanged += (_, _) =>
{
    editor.SelectionOpacity = opacitySlider.Value;
};

Automation

Slider participates in the framework automation surface as a writable range control. Its automation peer exposes Minimum, Maximum, and Value, and automation clients can set the current numeric value through the range-value provider.

Notes and pitfalls