Completed
Last Updated: 04 Feb 2021 01:11 by ADMIN
Release 2.22.0
René
Created on: 28 Jan 2021 08:49
Category: Slider
Type: Bug Report
2
Slider handle has wrong position in cultures with comma for a decimal separator

The Slider Component only seems to work properly if the range is a multiple of 10.

<TelerikSlider @bind-Value="@MyInteger"
                        Min="0"
                        Max="10"
                        SmallStep="1"
                        LargeStep="1">
        </TelerikSlider>

works as expected.  Same is true if Max is set to 20.  But if Max is set to 7 or 9 or 11 it does not work.  In those cases, clicking on the right arrow button does not do anything and after dragging the slider it magically moves back to 0.  Clicking on a value only works every second time.

Regards,

René

6 comments
ADMIN
Marin Bratanov
Posted on: 29 Jan 2021 19:21

Hello René,

Thank you for that. Indeed, it's the culture - that's what I was missing in my attempt to reproduce it. A fix is pending testing. You'll find your Telerik points updated.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

René
Posted on: 28 Jan 2021 18:15

Hello Marin,

it seems to be a culture thing.  I'm working on a german system and the decimal-separator is ','

 

If I change the decimal separator to '.' in the dev tools, the slider is displayed fine

 

 

You should make sure that your components always use Culture.Invariant and not the System-Culture.

 

Regards,

René

ADMIN
Marin Bratanov
Posted on: 28 Jan 2021 16:07

Hi René,

How exactly do you reproduce this behavior? I can't seem to break it in this project (a video is attached of a few things I tried).

In the meantime, I also advise you review the following things on the precision and settings:

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Attached Files:
René
Posted on: 28 Jan 2021 13:51

Hello Marin,
I was able to create a sample project with the problem.
When dispaying the current value of the slider in front of it as you have done in your video, I realized that the value is changed correctly but not so the circle marking the sliders position.

As you can see in this screenshot the problem occurs if --kendo-slider-end is a float instead of an integer:

In this little dummy project, the line within the slider is colored up to the correct value but the circle does not move along.

In my real life project, the colored line is not displayed correctly either. This might be because of custom styling.

I have attached the sample project for you to reproduce the error.

Regards,

René

Attached Files:
ADMIN
Marin Bratanov
Posted on: 28 Jan 2021 12:36

Hello René,

Could you provide some more details on what exactly does not work on your end? I tried these scenarios and things seem fine for me, here's the snippet and I am attaching a video of the correct behavior I see so you can confirm if I am missing something.

 

@MyInteger
<TelerikSlider @bind-Value="@MyInteger"
                Min="0"
                Max="10"
                SmallStep="1"
                LargeStep="1">
</TelerikSlider>
<br />
@MyInteger2
<TelerikSlider @bind-Value="@MyInteger2"
                Min="0"
                Max="9"
                SmallStep="1"
                LargeStep="1">
</TelerikSlider>
<br />
@MyInteger3
<TelerikSlider @bind-Value="@MyInteger3"
                Min="0"
                Max="7"
                SmallStep="1"
                LargeStep="1">
</TelerikSlider>
<br />
@MyInteger4
<TelerikSlider @bind-Value="@MyInteger4"
                Min="0"
                Max="11"
                SmallStep="1"
                LargeStep="1">
</TelerikSlider>

@code{
    int MyInteger { get; set; }
    int MyInteger2 { get; set; }
    int MyInteger3 { get; set; }
    int MyInteger4 { get; set; }
}

 

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Attached Files:
René
Posted on: 28 Jan 2021 08:52

At first I thought that only even numbers would be working but setting Max to 12 did not work either.

René