Slider Control For Windows 10

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

In the following demo we are going to change the font size of a text by a moving slider.

Step 1: Open a blank app and add Slider and Textblock control either from the toolbox or by copying the following XAML code into your grid.

<TextBlock Text="Slider Control" FontSize="20"></TextBlock>
<StackPanel>
    <StackPanel Margin="50,100,0,0" Orientation="Horizontal">
        <TextBlock Text="Slider" Margin="0,7,0,0"></TextBlock>
        <Slider Name="mySlider" Minimum="1" Maximum="50" Width="200" Value="50" Margin="15,0,0,0"></Slider>
    </StackPanel>
    <TextBlock Text="Sample Text" HorizontalAlignment="Center" Margin="0,50,0,0"></TextBlock>
</StackPanel>

 

 

Step 2: Now we want to bind the FontSize value of the TextBlock to the slider. Add the following code to the slider control. Here the Mode one defines that the changing value in the second element will not reflect to the first :

FontSize = "{x:Bind mySlider.Value, Mode=OneWay}"

Step 3: Run the application and move the slide accordingly.