How do I make this with slider control?

2 posts, 1 answers
  1. Mike Shilkov
    Mike Shilkov avatar
    30 posts
    Member since:
    Apr 2010

    Posted 05 Oct 2011 Link to this post

    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
  2. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 10 Oct 2011 Link to this post

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

  3. DevCraft banner
Back to Top