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

Inheritance Hierarchy

Inherited Members

Inherited properties

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Tag
Tag
Tag
, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Inherited events

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Inherited methods

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

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 New()Public Sub New()public Slider()

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 objectpublic object Header { get; set; }
    <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 DependencyPropertypublic static DependencyProperty HeaderProperty { get; }

    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 DataTemplatepublic DataTemplate HeaderTemplate { get; set; }
    <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 DependencyPropertypublic static DependencyProperty HeaderTemplateProperty { get; }

    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 doublepublic double IntermediateValue { get; set; }

    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 DependencyPropertypublic static DependencyProperty IntermediateValueProperty { get; }

    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 boolpublic bool IsDirectionReversed { get; set; }
    <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 DependencyPropertypublic static DependencyProperty IsDirectionReversedProperty { get; }

    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 boolpublic bool IsThumbToolTipEnabled { get; set; }
    <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 DependencyPropertypublic static DependencyProperty IsThumbToolTipEnabledProperty { get; }

    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 Orientationpublic Orientation Orientation { get; set; }
    <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 DependencyPropertypublic static DependencyProperty OrientationProperty { get; }

    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 SliderSnapsTopublic SliderSnapsTo SnapsTo { get; set; }
    <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 DependencyPropertypublic static DependencyProperty SnapsToProperty { get; }

    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 doublepublic double StepFrequency { get; set; }
    <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 DependencyPropertypublic static DependencyProperty StepFrequencyProperty { get; }

    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 IValueConverterpublic IValueConverter ThumbToolTipValueConverter { get; set; }
    <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 DependencyPropertypublic static DependencyProperty ThumbToolTipValueConverterProperty { get; }

    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 doublepublic double TickFrequency { get; set; }
    <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 DependencyPropertypublic static DependencyProperty TickFrequencyProperty { get; }

    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 TickPlacementpublic TickPlacement TickPlacement { get; set; }
    <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 DependencyPropertypublic static DependencyProperty TickPlacementProperty { get; }

    Property Value

Device family

Windows 10 (introduced v10.0.10240.0)

API contract

Windows.Foundation.UniversalApiContract (introduced v1)

Attributes

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

Details

Assembly

Windows.UI.Xaml.Controls.dll