Customize Slider control

[Jennifer]

Hi,
I want to customize the slider control to achieve the following

 1.   need to increase the width of tracker
 2.   custom triangle shapes for the handler

am using the following versions
 1.TeleriK       :2010.3.1314.1040
 2.silver light  : 4
 
I have tried   like
            <Setter Property="IncreaseHandleStyle" Value="{StaticResource IncreaseHandleStyle}" />
            <Setter Property="DecreaseHandleStyle" Value="{StaticResource DecreaseHandleStyle}" />

as mentioned in this link "http://demos.telerik.com/silverlight/#Slider/ColorPicker".But it didn't work for me.

I am looking for an immediate reply.Please help me to solve this

Thanks
Jennifer




 

[Kiril Stanoev]

Hello Jennifer,

 Please take a look at the attached project and let me know if it helps. It demonstrates the usage of IncreaseHandleStyle, DecreaseHandleStyle and TrackStyle.

Best wishes,
Kiril Stanoev
the Telerik team

[Jennifer]

Hi Kiril,

Thanks for the reply. Please let me know how to change the track color.

Here is the screenshot:

PS: Only consider the img (slidernew)

Thanks

[Jennifer]

.

[Princy]

Hello Jennifer,

Try the following style to achieve your scenario.
XAML:

<UserControl.Resources>
        <Style x:Key="SelectionMiddleThumbStyle1" TargetType="Thumb">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
. . . . . . .

<telerik:RadSlider  SelectionMiddleThumbStyle="{StaticResource SelectionMiddleThumbStyle1}"  >
</telerik:RadSlider>

Thanks,
Princy.

[Petar Mladenov]

Hi Princy and Jenny,

 Yes, you can use this Style like so:

    <Style x:Key="SelectionMiddleThumbStyle1" TargetType="Thumb">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Grid Height="25" Background="Black" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
    <telerik:RadSlider VerticalAlignment="Center"
                       DecreaseHandleStyle="{StaticResource RepeatButtonStyle2}"
                       HandlesVisibility="Visible"
                       IncreaseHandleStyle="{StaticResource RepeatButtonStyle1}"
                       IsSelectionRangeEnabled="True"
                       SelectionMiddleThumbStyle="{StaticResource SelectionMiddleThumbStyle1}"
                       TrackStyle="{StaticResource ContentControlStyle1}" />

in the project from Kiril and you will achieve the result in the attached picture. Please let us know if this is what you need. Kind regards,
Petar Mladenov
the Telerik team