Adjust Slider Handle

7 posts, 0 answers
  1. Angelo
    Angelo avatar
    6 posts
    Member since:
    Sep 2011

    Posted 06 Nov 2011 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 08 Nov 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Angelo
    Angelo avatar
    6 posts
    Member since:
    Sep 2011

    Posted 08 Nov 2011 Link to this post

    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!
  5. Kjell
    Kjell avatar
    276 posts
    Member since:
    Jun 2010

    Posted 03 Apr 2012 Link to this post

    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?

     




     


  6. Kjell
    Kjell avatar
    276 posts
    Member since:
    Jun 2010

    Posted 04 Apr 2012 Link to this post

    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 "    ".
  7. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 04 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Kjell
    Kjell avatar
    276 posts
    Member since:
    Jun 2010

    Posted 04 Apr 2012 Link to this post

    Thanks Dimo, I don't know why I didn't try that before messing with position, but it works better than my solution.
Back to Top
Kendo UI is VS 2017 Ready