Skip to content
Javier Suárez edited this page Aug 24, 2020 · 11 revisions

Slider

Is a horizontal bar that can be manipulated by the user to select a double value from a continuous range.

Features

  • Customizes the BackgroundColor, TrackColor, ThumbColor etc.
  • ControlTemplate support.

Using the control

The Slider defines three properties of type double:

  • Minimum is the minimum of the range, with a default value of 0.
  • Maximum is the maximum of the range, with a default value of 1.
  • Value is the slider's value, which can range between Minimum and Maximum and has a default value of 0.
<controls:Slider
    Minimum="0"
    Maximum="10"
    Value="5" />

Customization

We cam customize the background color using the BackgroundColor property.

<controls:Slider
    Value="3"
    BackgroundColor="LightCoral"/>

Or customize the track colors using:

  • MinimumTrackColor is the bar color on the left side of the thumb.
  • MaximumTrackColor is the bar color on the right side of the thumb.
<controls:Slider
    Minimum="0"
    MinimumTrackColor="Red"
    Maximum="10"
    MaximumTrackColor="Blue"
    Value="7"/>

Customize the thumb color using the ThumbColor property.

<controls:Slider
    ThumbColor="Orange"
    ThumbBorderColor="Red"
    Minimum="0"
    MinimumTrackColor="LightCoral"
    Maximum="10"
    MaximumTrackColor="DarkOrange"
    Value="4"/>

Be able to manage the sizes is also very important. We can Customize the track size using the TrackSize property.

<controls:Slider
    TrackSize="4"
    ThumbColor="Green"
    Minimum="0"
    MinimumTrackColor="LightGreen"
    Maximum="10"
    MaximumTrackColor="DarkGreen"
    Value="2"/>
Clone this wiki locally