Adjust Slider Handle

[Angelo]

Nice-to-have suggestion: the ability to change the slide handle width. The height is fine, but on mobile devices, I think being able to increase the width will make it more user-friendly for the fat-fingered types.

[Dimo]

Hello Angelo,

Currently all widths and heights that are related to the Slider and its elements are defined in the kendo.common.css file. Some other styles, such as margins and positioning, also depend on the mentioned sizes. Changing all these via configuration properties would be a complex and cumbersome task even for you as a developer. That's why currently we don't plan to introduce such a capability. In order to apply custom dimensions to the Slider, it is recommended to do one of the following:

1) append a custom CSS class to the Slider wrapper and use it to override the styles in the kendo.common.css file.

or

2) create a custom kendo.common.css file with the desired sizes in it

On a side note, the Slider's side buttons should be easier to use even by people with larger fingers.
Best wishes,
Dimo
the Telerik team

[Angelo]

Yes, I tried poring over the code yesterday, and it would be a daunting task to make the changes you mentioned (took some time to create a sprite with larger images, but once I got to the code, I just kinda gave up).

I know how finicky my users can get about seemingly menial things like the slider handle size, so I think I'll add spinner buttons to the left and right of the range sliders in order to take care of this.

Thanks for the follow-up. Looking forward to the first official release!

[Kjell]

Hi, sorry to bump an old thread but I was asked to do the same thing, well actually make it bigger all around.  I was able to do it by adding this CSS to my page:

.k-slider .k-draghandle

 {

   -moz-border-radius: 9px;

   -webkit-border-radius: 9px;

   border-radius: 9px;   

   height: 20px;

   width: 20px;                                           

 }

The only problem is the handle is not centered vertically on the slider bar.  Does anyone know how to accomplish that?

 

 

[Kjell]

Nevermind I got it.  Adding "position: relative;" to the CSS centered the button but also added the word "Drag" to it.  I edited the kendo.slider.min.js file and replaced "Drag" with "    ".

[Dimo]

Hello Kjell,

You need to adjust also the draghandle's top (or left for vertical sliders) style property values - these position the draghandle with regard to the track. The default value for both top and left is -4px.

Greetings,
Dimo
the Telerik team

[Kjell]

Thanks Dimo, I don't know why I didn't try that before messing with position, but it works better than my solution.