Tick numbers appear outside slider

[JohnVS]

If you have a fairly large range of numbers, like a max of 1000 with a largeStep of 100, the tick label that shows "1,000" appears off the slider. I noticed this because I have my Slider in a div with a border, so the tick label is over the top of the border. See the example here, with the basic code copied from the demos.

As you can see, the "1,000" label is outside the border of the div. Why is it doing this? Is there anyway to fix it?

[Hristo Germanov]

Hi JohnVS,

I think that you need to change the format of the tooltip in order to remove the thousand separator. Updated example: http://dojo.telerik.com/adoC/2

Regards,
Hristo Germanov
Telerik

 

 

[JohnVS]

Even without the thousands separator, the tooltip is still outside the border. Aren't you seeing that as well? Screenshot attached.

[Hristo Germanov]

Hello JohnVS,

I didn't notice that in my previous replay. Could you please set padding-right to the parent of the slider?
http://dojo.telerik.com/adoC/3

Regards,
Hristo Germanov
Telerik

 

 

[JohnVS]

I would consider that a hack, not a fix. Setting the padding-right causes the RangeSlider to no longer appear centered inside the bordered box. It seems reasonable that the tick label should never be outside the RangeSlider area. Is there no way to do this?

[Hristo Germanov]

Hi JohnVS,

The Slider labels (<span> elements) are enclosed inside the Slider ticks (<li> elements). The size of the ticks is always calculated, depending on the Slider size and the defined largeStep and smallStep. The labels can have arbitrary size, depending on the character count, that's why they can overflow the tick elements by design.

You can avoid the observed layout issue in two ways - enable the Slider buttons, or apply a suitable side padding to the Slider container. The size of the Slider labels can depend on the font size, that's why it is better to set the padding in em units, so that it depends on the font size too.

Regards,
Hristo Germanov
Telerik