This is a migrated thread and some comments may be shown as answers.

Slider tick labels missing for kendo-angular-ui

3 Answers 342 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Lance
Top achievements
Rank 1
Lance asked on 08 Jun 2017, 08:08 PM

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?

3 Answers, 1 is accepted

Sort by
0
Lance
Top achievements
Rank 1
answered on 08 Jun 2017, 08:22 PM
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.
0
Dimiter Topalov
Telerik team
answered on 12 Jun 2017, 03:41 PM
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.
0
Lance
Top achievements
Rank 1
answered on 20 Mar 2019, 06:41 PM
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.
Tags
Slider
Asked by
Lance
Top achievements
Rank 1
Answers by
Lance
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Lance
Top achievements
Rank 1
Share this question
or