RadRangeSlider

[Morgan]

Looking for more detailed information on the styling abilities of this control.  Can the track width be shrunk doesn't feel like it can be.  Definitely like this control for the application.  Just need to style it proper

When using Blend 2022 or 19, seeing a null reference with the Panel placed into a style not sure why

[Didi]

Hello Morgan,

Thank you for your interest in Telerik UWP RangeSLider control. All styling options are described here: https://docs.telerik.com/devtools/universal-windows-platform/controls/radrangeslider/explicitstyling If you navigate to the concrete definition you can review all properties that can be applied. 

For example the BottomRightScaleStyle of type telerikPrimitives:ScalePrimitive has the following properties for customizing the Ticks LabelPlacement, LabelFormst, ThickStyle, etc. 

Regarding the null ref exception, I am not sure why it occurs. Check whether the target types are set correctly, and the styles are in the page's resources. I have tried this and no exception:

<Page
    x:Class="RangeSlider.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikInput="using:Telerik.UI.Xaml.Controls.Input"
    xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <ResourceDictionary>
            <Style TargetType="telerikPrimitives:ScalePrimitive" x:Key="ScaleStyle">
                <Setter Property="LabelPlacement" Value="None"/>
                <Setter Property="TickPlacement" Value="TopLeft"/>
                <Setter Property="TickTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Ellipse Width="5" Height="5" Margin="0,5,0,0" Fill="LimeGreen"/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="telerikPrimitives:ScalePrimitive" x:Key="ScaleStyle2">
                <Setter Property="LabelPlacement" Value="Center"/>
                <Setter Property="LabelStyle">
                    <Setter.Value>
                        <Style TargetType="TextBlock">
                            <Setter Property="Foreground" Value="#BE673D"/>
                            <Setter Property="FontSize" Value="15"/>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="TickPlacement" Value="None"/>
            </Style>
        </ResourceDictionary>
    </Page.Resources>
    
    <Grid Padding="40">
        <telerikInput:RadRangeSlider BottomRightScaleStyle="{StaticResource ScaleStyle}"
                             TopLeftScaleStyle="{StaticResource ScaleStyle2}"
                             Width="300" TickFrequency="10"/>
    </Grid>
</Page>

 

I hope the link will be of help in achieving the desired style for the RangeSlider.

Regards,
Didi
Progress Telerik

[Morgan]

Thanks for the response, is there a way to get the Scale behind the thumbs?  This is the BottomRightScale styled to straddle the entire slider so I have tick marks on both sides but it appears that the RangeSlider is sorta of behind the actual scale primitive.  So many options yet, so hard to nail down.

[Polya]

Hi Morgan,

The RadRangeSlider arranges its elements in the following order: TopLeftScale, Slider, BottomRightScale. This means that the TopLeftScale is at the bottom regarding its z-index, after that is the Slider(of type RangeSliderPrimitive) and the BottomRightScale is the top-most element. 

Because of that and the fact that the RangeSliderPrimitive is a composite control, which includes the start, middle and end thumbs, a scenario where a Scale is in bettween the middle and end thumb (regarding its z-index) is not supported.

If an approach where the scale is under the whole slider is an appropriate alternative I can suggest styling the TopLeftSlider and offseting it with Margin and hiding the BottomRightSlider.

I've attached a sample project demonstrating this approach.

I hope this helps and is a suitable alternative.

[Morgan]

yeah finally got figured out.  Thanks for the reply.  While i might flip around what i have... I ended up sinking the bottom scale zindex down...