WPF Slider

The Slider XAML element represents a slider control in XAML. A slider control's default minimum and maximum values are 0 and 10.

The Maximim and Minimum attributes are used to set minimum and maximum values of a slider control.

<Slider Height="23" HorizontalAlignment="Left" Margin="26,34,0,0"
Name="slider1" VerticalAlignment="Top" Width="250"
Minimum="0" Maximum="100" />

Now, let's create a sample where slider action will change the value of a ProgressBar control.



In the below code, the key is setting the Value property of ProgressBar to Bind with the value of the Slider using ElementName.

Value="{Binding Path=Value, ElementName=Slider

Here is the complete sample:

<Window
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      x:Class="SliderDB.Window1"
      x:Name="Window"
      Title="Window1"
      Width="640" Height="480">

       <Grid x:Name="LayoutRoot">
            <Slider RenderTransformOrigin="0.501,0.622" Margin="81,161.66,66,0"
            x:Name="Slider" Style="{DynamicResource SimpleSlider}"
            VerticalAlignment="Top" Height="22" Maximum="100" Minimum="0" Value="0"         >
                  <Slider.RenderTransform>
                        <TransformGroup>
                              <ScaleTransform ScaleX="-1" ScaleY="-1"/>
                              <SkewTransform AngleX="0" AngleY="0"/>
                              <RotateTransform Angle="179.863"/>
                              <TranslateTransform X="-0.954" Y="-9.028"/>
                        </TransformGroup>
                  </Slider.RenderTransform>
                  <Slider.Background>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                              <GradientStop Color="#FFFFFFFF" Offset="0"/>
                              <GradientStop Color="#FFF5A544" Offset="1"/>
                        </LinearGradientBrush>
                  </Slider.Background>
            </Slider>
            <ProgressBar Margin="80,119,63,0" Style="{DynamicResource SimpleProgressBar}"
             VerticalAlignment="Top" Height="20"
             Value="{Binding Path=Value, ElementName=Slider, Mode=Default}">
                  <ProgressBar.Background>
                        <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
                              <GradientStop Color="#FFBABABA" Offset="0"/>
                              <GradientStop Color="#FFC7C7C7" Offset="0.5"/>
                              <GradientStop Color="#FF5D9C1D" Offset="0.75"/>
                        </LinearGradientBrush>
                  </ProgressBar.Background>
            </ProgressBar>
                     </Grid>
</Window>