Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Slider > How do I make this with slider control?

• Mike Shilkov

  Posted on Oct 5, 2011 (permalink)

  Hi.
  I need to implement smth similar to the attached picture.
  
  I went through your samples and some forum posts, but still got questions. Please let me know how I achieve the following:
  1. Show the values of selected start/end, so that the numeric labels above the thumbs move with them.
  2. Set the colors of 'below-min', 'average', 'above-max' to red-yellow-green. Do I have to override all the templates, similar to your sample here http://www.telerik.com/community/forums/silverlight/slider/gradient-background-color.aspx ? Or are there easier ways? Or can I do the trick programmatically, to minimize the code amount?
  
  Thanks in advance

  Attached files

  • RangeSlider.png

  Reply

• Answer Petar Mladenov Petar Mladenov

  Posted on Oct 10, 2011 (permalink)

  Hello Mike Shilkov,

   The first request cannot be implemented easily. We have previously created a feature request regarding the ToolTips in RadSlider. You can vote for it here.
  As for the colors you need, you can edit the template like so (the colors which are marked are additionally added):

  <Style x:Key="LargeHandleStyleLeft" TargetType="RepeatButton">

              <Setter Property="IsTabStop" Value="False"/>

              <Setter Property="Template">

                  <Setter.Value>

                      <ControlTemplate TargetType="RepeatButton">

                          <Grid Background="Transparent">

                              <Grid Height="6" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="Red" />

                          </Grid>

                      </ControlTemplate>

                  </Setter.Value>

              </Setter>

          </Style>

          <Style x:Key="LargeHandleStyleRight" TargetType="RepeatButton">

              <Setter Property="IsTabStop" Value="False" />

              <Setter Property="Template">

                  <Setter.Value>

                      <ControlTemplate TargetType="RepeatButton">

                          <Grid Background="Transparent">

                              <Grid Height="6" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="Green" />

                          </Grid>

                      </ControlTemplate>

                  </Setter.Value>

              </Setter>

          </Style>

  You can find this realized in the attached template. Please let us know if it satisfies you.  Kind regards,
  Petar Mladenov
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Attached files

  • SliderMVVM.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Slider > How do I make this with slider control?