Approved
Last Updated: 06 Nov 2019 09:00 by ADMIN
balazs
Created on: 30 Oct 2019 10:45
Category: Kendo UI for Angular 2+
Type: Feature Request
0
Add the option for slider long labels to be displayed on the top and below slider based on whether slider is in even or odd position

FR displaying long labels

If the labels are long, having all displayed below or on top of the slider would result in a messy layout.

Instead an option to place every odd item to the top and every even item (label) on the bottom would allow for longer texts

https://stackblitz.com/edit/kendo-angular-slider-steplabelsfn-this-obhuar?file=app/app.component.ts

Furthermore missing in documentation:

The [title] input won't work without setting [largeStep] as well.

Furthermore missing in documentation:

The callback to the [title] input has to be a fat-arrow function,

or an extra patch is needed (as the UI component currently 2019/10/30) this.getStepLabelNotWorking = this.getStepLabelNotWorking.bind(this); as inside a classic function the this refers not to the class itself, but to the component. IMO this is a BUG! See: https://stackblitz.com/edit/kendo-angular-slider-steplabelsfn-this?file=app/app.component.ts

1 comment
ADMIN
Svetlin
Posted on: 06 Nov 2019 09:00

Hi Balazs,

Thank you for the provided feature request.

Indeed, that would be a valuable addition to the Kendo UI for Angular Slider component.

Currently what could be done as a workaround is to add the following custom CSS:

      .k-slider-horizontal .k-tick:nth-of-type(2n) .k-label {
        bottom: 0;
        top: -16px;
      }

Here is an updated example demonstrating the suggestion:

https://stackblitz.com/edit/kendo-angular-slider-steplabelsfn-this-tqjnkx?file=app/app.component.ts

We will also proceed with updating the documentation so that it clarifies, that the [title] input property can be used only when the [largeStep] is set as well.

About the last request, as discussed in a private support thread, we will not overtake future action.

Thank you for the provided feedback once again.

Regards,
Svetlin
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.