Slider Slider Slider Slider Class
Definition
Represents a control that lets the user select from a range of values by moving a Thumb control along a track.
public : class Slider : RangeBase, ISlider, ISlider2public class Slider : RangeBase, ISlider, ISlider2Public Class Slider Inherits RangeBase Implements ISlider, ISlider2// This API is not available in Javascript.
<Slider .../>
- Inheritance
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
Examples
The following code example shows several slider controls and how to handle the ValueChanged event. The ValueChanged event is used to update the value of a TextBlock as the Value property of the slider changes.
<StackPanel Width="300" Margin="120">
<TextBlock Text="Basic Slider:" Margin="0,0,0,5"/>
<Slider x:Name="slider1"
Minimum="0"
Maximum="10" />
<TextBlock Text="Slider with ValueChanged event handler:" Margin="0,25,0,0"/>
<Slider x:Name="slider2"
Minimum="0"
Maximum="10"
TickFrequency="2"
TickPlacement="BottomRight"
ValueChanged="slider2_ValueChanged" />
<TextBlock x:Name="textBlock1"
Margin="0,0,0,10"
Text="Current value: 0" />
<TextBlock Text="Slider with vertical orientation:" Margin="0,25,0,5"/>
<Slider x:Name="slider3"
Minimum="0"
Maximum="10"
Height="100"
TickFrequency="5"
Orientation="Vertical"/>
<TextBlock Text="Slider with reversed direction:" Margin="0,25,0,0"/>
<Slider x:Name="slider4"
Minimum="0"
Maximum="10"
IsDirectionReversed="true"/>
</StackPanel>
private void slider2_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
string msg = String.Format("Current value: {0}", e.NewValue);
this.textBlock1.Text = msg;
}
Private Sub slider2_ValueChanged(ByVal sender As Object, _
ByVal e As RoutedPropertyChangedEventArgs(Of Double))
Dim msg As String = String.Format("Current value: {0}", e.NewValue)
Me.textBlock1.Text = msg
End Sub
Remarks
Slider is a control that lets the user select from a range of values by moving a Thumb control along a track.

Use a Slider control when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings). Slider s are for user interaction. If a user can't ever change the value, use read-only text instead. For more information on when to use a Slider, see Guidelines for sliders.
Binding Minimum and Maximum values
Note
When binding Minimum and Maximum values in Extensible Application Markup Language (XAML), declare the Binding for Maximum first. If the Binding for Maximum is declared after Minimum, the bound value for Maximum is ignored and the following situations can occur: + If the bound Minimum value is negative, the Maximum value is set to 0.
These behaviors can also occur if you set the Minimum value without also explicitly setting the Maximum value.
Control style and template
You can modify the default Style and ControlTemplate to give the control a unique appearance. To change certain aspects of the slider’s appearance, such as the Thumb color, you need to retemplate the control (or use the resources in the table below on Windows 10, version 1607 or later). For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP<SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. Styles and resources from different versions of the SDK might have different values.
Starting in Windows 10, version 1607 (Windows Software Development Kit (SDK) version 10.0.14393.0), generic.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article.
This table shows the resources used by the Slider control.
| Resource key | Description |
|---|---|
| SliderContainerBackground | Background color at rest |
| SliderContainerBackgroundPointerOver | Background color on hover |
| SliderContainerBackgroundPressed | Background color when pressed |
| SliderContainerBackgroundDisabled | Background color when disabled |
| SliderThumbBackground | Background color of the thumb at rest |
| SliderThumbBackgroundPointerOver | Background color of the thumb on hover |
| SliderThumbBackgroundPressed | Background color of the thumb when pressed |
| SliderThumbBackgroundDisabled | Background color of the thumb when disabled |
| SliderTrackFill | Color of unfilled portion of track |
| SliderTrackFillPointerOver | Color of unfilled portion of track on hover |
| SliderTrackFillPressed | Color of unfilled portion of track when pressed |
| SliderTrackFillDisabled | Color of unfilled portion of track when disabled |
| SliderTrackValueFill | Color of filled portion of track |
| SliderTrackValueFillPointerOver | Color of filled portion of track on hover |
| SliderTrackValueFillPressed | Color of filled portion of track when pressed |
| SliderTrackValueFillDisabled | Color of filled portion of track when disabled |
| SliderHeaderForeground | Foreground color of the label |
| SliderHeaderForegroundDisabled | Foreground color of the label when disabled |
| SliderTickBarFill | Color of the tick marks |
| SliderTickBarFillDisabled | Color of the tick marks when disabled |
| SliderInlineTickBarFill | Color of inline tick marks |
Constructors
Properties
Header Header Header Header
Gets or sets the content for the control's header.
public : PlatForm::Object Header { get; set; }public object Header { get; set; }Public ReadWrite Property Header As object// This API is not available in Javascript.
<Slider Header="headerString"/>
- Value
- PlatForm::Object object object object
The content of the control's header. The default is null.
Remarks
You can set a data template for the Header by using the HeaderTemplate property.
- See Also
HeaderProperty HeaderProperty HeaderProperty HeaderProperty
Identifies the Header dependency property.
public : static DependencyProperty HeaderProperty { get; }public static DependencyProperty HeaderProperty { get; }Public Static ReadOnly Property HeaderProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Header dependency property.
HeaderTemplate HeaderTemplate HeaderTemplate HeaderTemplate
Gets or sets the DataTemplate used to display the content of the control's header.
public : DataTemplate HeaderTemplate { get; set; }public DataTemplate HeaderTemplate { get; set; }Public ReadWrite Property HeaderTemplate As DataTemplate// This API is not available in Javascript.
<Slider>
<Slider.HeaderTemplate>
singleDataTemplate
</Slider.HeaderTemplate>
</Slider>
The template that specifies the visualization of the header object. The default is null.
- See Also
HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty
Identifies the HeaderTemplate dependency property.
public : static DependencyProperty HeaderTemplateProperty { get; }public static DependencyProperty HeaderTemplateProperty { get; }Public Static ReadOnly Property HeaderTemplateProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the HeaderTemplate dependency property.
IntermediateValue IntermediateValue IntermediateValue IntermediateValue
Gets or sets the value of the Slider while the user is interacting with it, before the value is snapped to either the tick or step value. The value the Slider snaps to is specified by the SnapsTo property.
public : double IntermediateValue { get; set; }public double IntermediateValue { get; set; }Public ReadWrite Property IntermediateValue As double// This API is not available in Javascript.
- Value
- double double double double
A temporary value.
Remarks
Set the SnapsTo property to specify whether the Slider snaps to tick marks or step values. Set the TickFrequency or StepFrequency property to specify the interval between snap points.
This property isn't typically set in XAML. It could be useful though as an element binding source for another XAML UI element that displays the IntermediateValue value.
- See Also
IntermediateValueProperty IntermediateValueProperty IntermediateValueProperty IntermediateValueProperty
Identifies the IntermediateValue dependency property.
public : static DependencyProperty IntermediateValueProperty { get; }public static DependencyProperty IntermediateValueProperty { get; }Public Static ReadOnly Property IntermediateValueProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the IntermediateValue dependency property.
IsDirectionReversed IsDirectionReversed IsDirectionReversed IsDirectionReversed
Gets or sets a value that indicates the direction of increasing value.
public : PlatForm::Boolean IsDirectionReversed { get; set; }public bool IsDirectionReversed { get; set; }Public ReadWrite Property IsDirectionReversed As bool// This API is not available in Javascript.
<Slider IsDirectionReversed="bool"/>
- Value
- PlatForm::Boolean bool bool bool
true if the direction of increasing value is to the left for a horizontal slider or down for a vertical slider; otherwise, false. The default is false.
IsDirectionReversedProperty IsDirectionReversedProperty IsDirectionReversedProperty IsDirectionReversedProperty
Identifies the IsDirectionReversed dependency property.
public : static DependencyProperty IsDirectionReversedProperty { get; }public static DependencyProperty IsDirectionReversedProperty { get; }Public Static ReadOnly Property IsDirectionReversedProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the IsDirectionReversed dependency property.
IsThumbToolTipEnabled IsThumbToolTipEnabled IsThumbToolTipEnabled IsThumbToolTipEnabled
Gets or sets a value that determines whether the slider value is shown in a tool tip for the Thumb component of the Slider.
public : PlatForm::Boolean IsThumbToolTipEnabled { get; set; }public bool IsThumbToolTipEnabled { get; set; }Public ReadWrite Property IsThumbToolTipEnabled As bool// This API is not available in Javascript.
<Slider IsThumbToolTipEnabled="bool" />
- Value
- PlatForm::Boolean bool bool bool
True if a tool tip is shown for the Thumb component; otherwise, false. The default is true.
IsThumbToolTipEnabledProperty IsThumbToolTipEnabledProperty IsThumbToolTipEnabledProperty IsThumbToolTipEnabledProperty
Identifies the IsThumbToolTipEnabled dependency property.
public : static DependencyProperty IsThumbToolTipEnabledProperty { get; }public static DependencyProperty IsThumbToolTipEnabledProperty { get; }Public Static ReadOnly Property IsThumbToolTipEnabledProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the IsThumbToolTipEnabled dependency property.
Orientation Orientation Orientation Orientation
Gets or sets the orientation of a Slider.
public : Orientation Orientation { get; set; }public Orientation Orientation { get; set; }Public ReadWrite Property Orientation As Orientation// This API is not available in Javascript.
<Slider Orientation="Horizontal"/>
-or-
<Slider Orientation="Vertical"/>
One of the Orientation values. The default is Horizontal.
OrientationProperty OrientationProperty OrientationProperty OrientationProperty
Identifies the Orientation dependency property.
public : static DependencyProperty OrientationProperty { get; }public static DependencyProperty OrientationProperty { get; }Public Static ReadOnly Property OrientationProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Orientation dependency property.
SnapsTo SnapsTo SnapsTo SnapsTo
Gets or sets a value that indicates how the Slider conforms the thumb position to its steps or tick marks.
public : SliderSnapsTo SnapsTo { get; set; }public SliderSnapsTo SnapsTo { get; set; }Public ReadWrite Property SnapsTo As SliderSnapsTo// This API is not available in Javascript.
<Slider SnapsTo="sliderSnapsToMemberName" />
An enumeration value that specifies whether the Slider snaps to steps or tick marks. The default is StepValues.
Remarks
Set the SnapsTo property to specify whether the Slider snaps to tick marks or step values. Set the TickFrequency or StepFrequency property to specify the interval between snap points.
- See Also
SnapsToProperty SnapsToProperty SnapsToProperty SnapsToProperty
Identifies the SnapsTo dependency property.
public : static DependencyProperty SnapsToProperty { get; }public static DependencyProperty SnapsToProperty { get; }Public Static ReadOnly Property SnapsToProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the SnapsTo dependency property.
StepFrequency StepFrequency StepFrequency StepFrequency
Gets or sets the value part of a value range that steps should be created for.
public : double StepFrequency { get; set; }public double StepFrequency { get; set; }Public ReadWrite Property StepFrequency As double// This API is not available in Javascript.
<Slider StepFrequency="double" />
- Value
- double double double double
The value part of a value range that steps should be created for.
Remarks
When the SnapsTo property is set to StepValues, set the StepFrequency property to specify the interval between snap points.
- See Also
StepFrequencyProperty StepFrequencyProperty StepFrequencyProperty StepFrequencyProperty
Identifies the StepFrequency dependency property.
public : static DependencyProperty StepFrequencyProperty { get; }public static DependencyProperty StepFrequencyProperty { get; }Public Static ReadOnly Property StepFrequencyProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the StepFrequency dependency property.
ThumbToolTipValueConverter ThumbToolTipValueConverter ThumbToolTipValueConverter ThumbToolTipValueConverter
Gets or sets the converter logic that converts the range value of the Slider into tool tip content.
public : IValueConverter ThumbToolTipValueConverter { get; set; }public IValueConverter ThumbToolTipValueConverter { get; set; }Public ReadWrite Property ThumbToolTipValueConverter As IValueConverter// This API is not available in Javascript.
<Slider ThumbToolTipValueConverter="referenceToValueConverter" />
A converter implementation.
Remarks
By default, the Slider 's thumb tooltip shows the numeric value of the slider. To show other values in the thumb tooltip, you create a custom value converter and assign it to the ThumbToolTipValueConverter property.
- See Also
ThumbToolTipValueConverterProperty ThumbToolTipValueConverterProperty ThumbToolTipValueConverterProperty ThumbToolTipValueConverterProperty
Identifies the ThumbToolTipValueConverter dependency property.
public : static DependencyProperty ThumbToolTipValueConverterProperty { get; }public static DependencyProperty ThumbToolTipValueConverterProperty { get; }Public Static ReadOnly Property ThumbToolTipValueConverterProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the ThumbToolTipValueConverter dependency property.
TickFrequency TickFrequency TickFrequency TickFrequency
Gets or sets the increment of the value range that ticks should be created for.
public : double TickFrequency { get; set; }public double TickFrequency { get; set; }Public ReadWrite Property TickFrequency As double// This API is not available in Javascript.
<Slider TickFrequency="double" />
- Value
- double double double double
The increment to create tick marks for. The default is 0.0.
Examples
Here's a slider with its TickFrequency set to 2 and its TickPlacement set to BottomRight.
<Slider x:Name="slider2"
Minimum="0"
Maximum="10"
TickFrequency="2"
TickPlacement="BottomRight"
ValueChanged="slider2_ValueChanged" />
Remarks
Set the TickFrequency property to specify at which values tick marks are drawn on a Slider. For example, if a Slider has Minimum of 0, Maximum of 20, and TickFrequency of 2, tick marks are placed at every other step value, starting at 0 and ending at 20.
The drawing of tick marks on a slider depends on both the TickFrequency and TickPlacement properties. In order for tick marks to be shown, you must set the TickFrequency property to a value greater than 0, and the TickPlacement property to a value other than None.
To prevent tick marks from being packed too densely, the Slider will only show tick marks that are a minimum of 20 pixels apart. If a combination of Slider size, value range, and tick frequency results in tick marks that are too close together, some tick marks are not shown.
When the SnapsTo property is set to Ticks, the TickFrequency property also specifies the interval between snap points.
- See Also
TickFrequencyProperty TickFrequencyProperty TickFrequencyProperty TickFrequencyProperty
Identifies the TickFrequency dependency property.
public : static DependencyProperty TickFrequencyProperty { get; }public static DependencyProperty TickFrequencyProperty { get; }Public Static ReadOnly Property TickFrequencyProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the TickFrequency dependency property.
TickPlacement TickPlacement TickPlacement TickPlacement
Gets or sets a value that indicates where to draw tick marks in relation to the track.
public : TickPlacement TickPlacement { get; set; }public TickPlacement TickPlacement { get; set; }Public ReadWrite Property TickPlacement As TickPlacement// This API is not available in Javascript.
<Slider TickPlacement="tickPlacementMemberName" />
An enumeration value that specifies where to draw tick marks in relation to the track. The default is Inline.
Examples
Here's a slider with its TickFrequency set to 2 and its TickPlacement set to BottomRight.
<Slider x:Name="slider2"
Minimum="0"
Maximum="10"
TickFrequency="2"
TickPlacement="BottomRight"
ValueChanged="slider2_ValueChanged" />
Remarks
The drawing of tick marks on a slider depends on both the TickFrequency and TickPlacement properties. In order for tick marks to be shown, you must set the TickFrequency property to a value greater than 0, and the TickPlacement property to a value other than None.
- See Also
TickPlacementProperty TickPlacementProperty TickPlacementProperty TickPlacementProperty
Identifies the TickPlacement dependency property.
public : static DependencyProperty TickPlacementProperty { get; }public static DependencyProperty TickPlacementProperty { get; }Public Static ReadOnly Property TickPlacementProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the TickPlacement dependency property.