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
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() Slider()

Initializes a new instance of the Slider class.

public : Slider()public Slider()Public Sub New()// This API is not available in Javascript.

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

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

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.

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.

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.

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.

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

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

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

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

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.

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

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.

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.

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

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.

See Also