How do I make this with slider control?

[Mike Shilkov]

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

[Petar Mladenov]

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