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
<Slider .../>
Inheritance
Attributes
Windows 10 requirements
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.

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

Constructors

Slider() Slider() Slider()

Initializes a new instance of the Slider class.

public : Slider()public Slider()Public Sub New()
Attributes

Properties

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
<Slider Header="headerString"/>

Value
PlatForm::Object object object

The content of the control's header. The default is null.

Attributes

Remarks

You can set a data template for the Header by using the HeaderTemplate property.

See Also

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the Header dependency property.

Attributes

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>
Value
DataTemplate DataTemplate DataTemplate

The template that specifies the visualization of the header object. The default is null.

Attributes
See Also

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the HeaderTemplate dependency property.

Attributes

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
Value
double double double

A temporary value.

Attributes

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

Identifies the IntermediateValue dependency property.

public : static DependencyProperty IntermediateValueProperty { get; }public static DependencyProperty IntermediateValueProperty { get; }Public Static ReadOnly Property IntermediateValueProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the IntermediateValue dependency property.

Attributes

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
<Slider IsDirectionReversed="bool"/>
Value
PlatForm::Boolean 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.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the IsDirectionReversed dependency property.

Attributes

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
<Slider IsThumbToolTipEnabled="bool" />
Value
PlatForm::Boolean bool bool

True if a tool tip is shown for the Thumb component; otherwise, false. The default is true.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the IsThumbToolTipEnabled dependency property.

Attributes

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"/>
Value
Orientation Orientation Orientation

One of the Orientation values. The default is Horizontal.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the Orientation dependency property.

Attributes

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" />
Value
SliderSnapsTo SliderSnapsTo SliderSnapsTo

An enumeration value that specifies whether the Slider snaps to steps or tick marks. The default is StepValues.

Attributes

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

Identifies the SnapsTo dependency property.

public : static DependencyProperty SnapsToProperty { get; }public static DependencyProperty SnapsToProperty { get; }Public Static ReadOnly Property SnapsToProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the SnapsTo dependency property.

Attributes

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" />
Value
double double double

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

Attributes

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

Identifies the StepFrequency dependency property.

public : static DependencyProperty StepFrequencyProperty { get; }public static DependencyProperty StepFrequencyProperty { get; }Public Static ReadOnly Property StepFrequencyProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the StepFrequency dependency property.

Attributes

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" />
Value
IValueConverter IValueConverter IValueConverter

A converter implementation.

Attributes

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

Identifies the ThumbToolTipValueConverter dependency property.

public : static DependencyProperty ThumbToolTipValueConverterProperty { get; }public static DependencyProperty ThumbToolTipValueConverterProperty { get; }Public Static ReadOnly Property ThumbToolTipValueConverterProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the ThumbToolTipValueConverter dependency property.

Attributes

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" />
Value
double double double

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

Attributes

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

Identifies the TickFrequency dependency property.

public : static DependencyProperty TickFrequencyProperty { get; }public static DependencyProperty TickFrequencyProperty { get; }Public Static ReadOnly Property TickFrequencyProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the TickFrequency dependency property.

Attributes

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" />
Value
TickPlacement TickPlacement TickPlacement

An enumeration value that specifies where to draw tick marks in relation to the track. The default is Inline.

Attributes

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

Identifies the TickPlacement dependency property.

public : static DependencyProperty TickPlacementProperty { get; }public static DependencyProperty TickPlacementProperty { get; }Public Static ReadOnly Property TickPlacementProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the TickPlacement dependency property.

Attributes

See Also