Slider Slider Slider Class

Represents a control that lets the user select from a range of values by moving a Thumb control along a track.

Syntax

Declaration

public class Sliderpublic class SliderPublic Class Slider
<Slider .../>

Remarks

Slider is a control that lets the user select from a range of values by moving a Thumb control along a track.

Slider control

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&lt;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 keyDescription
SliderContainerBackgroundBackground color at rest
SliderContainerBackgroundPointerOverBackground color on hover
SliderContainerBackgroundPressedBackground color when pressed
SliderContainerBackgroundDisabledBackground color when disabled
SliderThumbBackgroundBackground color of the thumb at rest
SliderThumbBackgroundPointerOverBackground color of the thumb on hover
SliderThumbBackgroundPressedBackground color of the thumb when pressed
SliderThumbBackgroundDisabledBackground color of the thumb when disabled
SliderTrackFillColor of unfilled portion of track
SliderTrackFillPointerOverColor of unfilled portion of track on hover
SliderTrackFillPressedColor of unfilled portion of track when pressed
SliderTrackFillDisabledColor of unfilled portion of track when disabled
SliderTrackValueFillColor of filled portion of track
SliderTrackValueFillPointerOverColor of filled portion of track on hover
SliderTrackValueFillPressedColor of filled portion of track when pressed
SliderTrackValueFillDisabledColor of filled portion of track when disabled
SliderHeaderForegroundForeground color of the label
SliderHeaderForegroundDisabledForeground color of the label when disabled
SliderTickBarFillColor of the tick marks
SliderTickBarFillDisabledColor of the tick marks when disabled
SliderInlineTickBarFillColor of inline tick marks

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

Constructors summary

Initializes a new instance of the Slider class.

Properties summary

Gets or sets the content for the control's header.

Identifies the Header dependency property.

Gets or sets the DataTemplate used to display the content of the control's header.

Identifies the HeaderTemplate dependency property.

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.

Identifies the IntermediateValue dependency property.

Gets or sets a value that indicates the direction of increasing value.

Identifies the IsDirectionReversed dependency property.

Gets or sets a value that determines whether the slider value is shown in a tool tip for the Thumb component of the Slider.

Identifies the IsThumbToolTipEnabled dependency property.

Gets or sets the orientation of a Slider.

Identifies the Orientation dependency property.

Gets or sets a value that indicates how the Slider conforms the thumb position to its steps or tick marks.

Identifies the SnapsTo dependency property.

Gets or sets the value part of a value range that steps should be created for.

Identifies the StepFrequency dependency property.

Gets or sets the converter logic that converts the range value of the Slider into tool tip content.

Identifies the ThumbToolTipValueConverter dependency property.

Gets or sets the increment of the value range that ticks should be created for.

Identifies the TickFrequency dependency property.

Gets or sets a value that indicates where to draw tick marks in relation to the track.

Identifies the TickPlacement dependency property.

Constructors

  • Slider()
    Slider()
    Slider()
    Slider()

    Initializes a new instance of the Slider class.

    public Slider()public Slider()Public Function Slider() As

Properties

  • Header
    Header
    Header
    Header

    Gets or sets the content for the control's header.

    public object Header { get; set; }public object Header { get; set; }Public ReadWrite Property Header As object
    <Slider Header="headerString"/>
    
    

    Property Value

    • 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.

  • 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

    Property Value

  • 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
    <Slider>
      <Slider.HeaderTemplate>
        singleDataTemplate
      </Slider.HeaderTemplate>
    </Slider>
    

    Property Value

  • 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

    Property Value

  • 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

    Property Value

    • 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.

  • 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

    Property Value

  • IsDirectionReversed
    IsDirectionReversed
    IsDirectionReversed
    IsDirectionReversed

    Gets or sets a value that indicates the direction of increasing value.

    public bool IsDirectionReversed { get; set; }public bool IsDirectionReversed { get; set; }Public ReadWrite Property IsDirectionReversed As bool
    <Slider IsDirectionReversed="bool"/>
    

    Property Value

    • 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

    Property Value

  • 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 bool IsThumbToolTipEnabled { get; set; }public bool IsThumbToolTipEnabled { get; set; }Public ReadWrite Property IsThumbToolTipEnabled As bool
    <Slider IsThumbToolTipEnabled="bool" />
    

    Property Value

    • 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

    Property Value

  • 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
    <Slider Orientation="Horizontal"/>
    -or-
    <Slider Orientation="Vertical"/>
    

    Property Value

  • 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

    Property Value

  • 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
    <Slider SnapsTo="sliderSnapsToMemberName" />
    

    Property 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.

  • 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

    Property Value

  • 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
    <Slider StepFrequency="double" />
    

    Property Value

    • double
      double
      double

      The value part of a value range that steps should be created for.

    Remarks

    When the SnapsTo property is set to SliderSnapsTo, set the StepFrequency property to specify the interval between snap points.

  • 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

    Property Value

  • 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
    <Slider ThumbToolTipValueConverter="referenceToValueConverter" />
    

    Property Value

    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.

  • 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

    Property Value

  • 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
    <Slider TickFrequency="double" />
    

    Property Value

    • double
      double
      double

      The increment to create tick marks for. The default is 0.0.

    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 SliderSnapsTo, the TickFrequency property also specifies the interval between snap points.

    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" />
    
  • 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

    Property Value

  • 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
    <Slider TickPlacement="tickPlacementMemberName" />
    

    Property Value

    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.

    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" />
    
  • 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

    Property Value

Attributes

Windows.Foundation.Metadata.WebHostHiddenAttribute
Windows.Foundation.Metadata.StaticAttribute
Windows.Foundation.Metadata.ContractVersionAttribute
Windows.Foundation.Metadata.ThreadingAttribute
Windows.Foundation.Metadata.StaticAttribute
Windows.Foundation.Metadata.ComposableAttribute
Windows.Foundation.Metadata.MarshalingBehaviorAttribute

Details

Assembly

Windows.UI.Xaml.Controls.dll