Format Slider for Touch?

2 posts, 1 answers
  1. Joshua
    Joshua avatar
    17 posts
    Member since:
    Apr 2018

    Posted 18 Oct 2018 Link to this post

    I'm developing against the Microsoft Surface, and need a slider that is easy to adjust just by touching the screen, the default slider (any theme) is pretty narrow and it's area of recognition is a little too small/exact to be touch-friendly, is there an easy way to make a horizontal slider thicker/taller?  It works fine for mouse but with just touch the user misses the area of sensitivity on the first try (most of the time) and has to try again.  We want to make the slider easier to manipulate.

    thanks!

  2.
  3. Answer
    Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1073 posts

    Posted 23 Oct 2018 Link to this post

    Hello Joshua,

    You can achieve the desired result by specifying custom styles as the ThumbStyle and/or TrackStyle of the RadSlider control.

    <Window.Resources>
        <Style x:Key="TrackStyle" TargetType="ContentControl" BasedOn="{StaticResource TrackStyle}">
            <Setter Property="Height" Value="20" />
        </Style>
        <Style x:Key="ThumbStyle" TargetType="Thumb" BasedOn="{StaticResource ThumbStyle}">
            <Setter Property="Height" Value="30" />
            <Setter Property="Width" Value="40" />
        </Style>
    </Window.Resources>
    <Grid>
        <telerik:RadSlider TrackStyle="{StaticResource TrackStyle}"
                           ThumbStyle="{StaticResource ThumbStyle}"
                           Minimum="0" Maximum="100" Value="50" />
    </Grid>

    I've also prepared a small sample project as a demonstration.

    Please let me know if this is what you have in mind or if I've misunderstood your requirement.

    Regards,
    Dilyan Traykov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top