Slider tick labels missing for kendo-angular-ui

4 posts, 0 answers
  1. Lance
    Lance avatar
    6 posts
    Member since:
    Jan 2016

    Posted 08 Jun 2017 Link to this post

    I'm trying out the native Angular 4 components, and I'm starting with the Slider. I was really surprised not to have value labels for the ticks. You can see that in the current documentation: http://www.telerik.com/kendo-angular-ui/components/inputs/slider/

    Not having them as the default wouldn't surprise me much, but there doesn't seem to be a way to turn them on on the API: http://www.telerik.com/kendo-angular-ui/components/inputs/api/SliderComponent/

    The slider in kendo-ui had this feature. Am I just missing something?

  2.
  3. Lance
    Lance avatar
    6 posts
    Member since:
    Jan 2016

    Posted 08 Jun 2017 in reply to Lance Link to this post

    Also, how would I change the color of the tick? Our app has a grey background, and the tick is barely visible. It was much darker in kendo-ui, so it wasn't a problem, but I don't see how to change the color to provide sufficient contrast with the background I'm using.
  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 12 Jun 2017 Link to this post

    Hi Lance,

    Indeed, the designed behavior of the Kendo UI for Angular Slider component is to show the tick values on hover only. The value that is shown in the tooltip can be customized via the "title" input.

    The tick background color is actually coming from an image. You can inspect the tick in the browser developer tools (screenshot attached), and override the relevant CSS as necessary, e.g.:

    styles: [`
          >>> .k-slider-horizontal .k-tick {
            background-image: url(...)
          }
        `]

    For any features and/or enhancements that you feel might improve the quality of our product, please submit a feature request to our UserVoice portal:

    http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback

    It is closely monitored, and helps prioritize, based on customer demand when updating our roadmap. Thank you in advance.

    Regards,
    Dimiter Topalov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Lance
    Lance avatar
    4 posts
    Member since:
    Aug 2015

    Posted 20 Mar 2019 in reply to Lance Link to this post

    For anyone who may come across this post, I've since learned that to get tick labels you need to have the [largeStep] attribute set on the slider control and they appear.
  8.
Back to Top