#1,027 – Displaying a Subrange on a Slider

You can highlight a sub-range on a Slider that is some subset of the full range.  You do this by setting the IsSelectionRangeEnabled property to true and setting SelectionStart and SelectionEnd to the desired start and end values for the range.  The sub-range is displayed using a different color.  Triangular indicators are displayed on the tickmark bar to show the start and end of the range.

Displaying a sub-range in this manner has no effect on the values that you’re allowed to pick with the Slider.  It’s merely a visual indicator.

        <Label Content="Set your Age.  (Subrange is typical working age)."/>
        <Slider Name="mySlider" Margin="10" Foreground="Blue"
                Minimum="0" Maximum="100"
                IsSelectionRangeEnabled="True"
                SelectionStart="22" SelectionEnd="65"
                TickPlacement="BottomRight"
                TickFrequency="5" />
        <StackPanel Orientation="Horizontal">
            <Label Content="Value:" />
            <TextBlock Text="{Binding Value, ElementName=mySlider, StringFormat={}{0:0}}"
                       VerticalAlignment="Center"/>
        </StackPanel>

#1,026 – Horizontal and Vertical Sliders

You can orient a Slider either horizontally or vertically by setting the Orientation property to Horizontal (the default) or Vertical.  The thumb on the Slider will be rendered differently, depending on the orientation.

Below is an example of both a horizontal and a vertical Slider.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Label Content="Width" VerticalAlignment="Center"/>
            <Slider Grid.Column="1" Margin="10" Foreground="Blue"
                    Minimum="1" Maximum="5"
                    TickPlacement="BottomRight"/>
        </Grid>

        <Slider Grid.Row="1" Margin="10,0" Foreground="Blue"
                Minimum="1" Maximum="10"
                Orientation="Vertical"
                TickPlacement="BottomRight"/>
        <Label Grid.Row="2" Content="Height"/>
    </Grid>

#1,025 – Small and Large Changes to the Value of a Slider

When you use the mouse to drag the thumb of a Slider control, you can set the value of the slider to any value within its range.  (This is true unless you’ve set the IsSnapToTickEnabled property to true, in which case you’re constrained to values at tickmarks).

You can also increase or decrease the value of the Slider by:

• Using the arrow keys on the keyboard – changes value by SmallChange property amount – default 0.1
• Left-clicking in the Slider on one side of the thumb or the other – changes value by LargeChange property amount – default 1.0

You can change these default values by setting the SmallChange and/or LargeChange properties.

For example:

<Slider Name="mySlider" Margin="10"
        Minimum="0" Maximum="50"
        SmallChange="1" LargeChange="5"/>

With these changes, you can now use the arrow keys to change the Slider’s value by 1.0 and can left-click next to the thumb to change the value by 5.0.

#1,021 – Two Ways to Position Tick Marks on a Slider

You can cause tick marks to be displayed with a Slider control by setting the TickPlacement property.  By default, this places tick marks every 1 unit between the Minimum and Maximum values (inclusive).

There are two ways to change where tick marks are displayed on the Slider.  The first is to set the TickFrequency to indicate the desired spacing between tick marks.  When you set TickFrequency:

• Tick mark is displayed at Minimum value
• Tick marks are displayed at Minimum + TickFrequency and then every TickFrequency units
• Tick mark is displayed at Maximum value

For example, if Minimum is 1, Maximum is 10, and TickFrequency is 2, we get tick marks at: 1, 3, 5, 7, 9, 10.

The second method for configuring tick marks is to list a series of positions using the Ticks property.  Ticks are placed at the specified locations, as well as the Minimum and Maximum location.

        <Slider Minimum="1" Maximum="10"
                IsSnapToTickEnabled="True"
                TickPlacement="BottomRight"
                Ticks="2,4,6,8"/>

#1,018 – Slider Basics

The Slider is a control that allows a user to drag a “thumb” across a range of values, to select a specific numeric value.

The Slider’s main properties are:

• Value – The numeric value selected by the slider
• Minimum – The minimum value that the slider can be set to (thumb dragged all of the way to the left)
• Maximum – The maximum value that the slider can be set to (thumb dragged all of the way to the right)

You’ll typically set the Minimum and Maximum to some static values, setting them in XAML to indicate the allowed range of values that a user is allowed to input.

You’ll typically bind the Value property to some property in code, allowing the user to set that value using the Slider.

        <Slider Name="mySlider" Margin="10"
                Minimum="1" Maximum="100"/>
        <StackPanel Orientation="Horizontal">
            <Label Content="Value:" VerticalAlignment="Center"/>
            <TextBlock Text="{Binding Path=Value, ElementName=mySlider}"
                       Margin="10"/>
        </StackPanel>