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

Progress® Kendo UI® for Angular Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 01 Dec 2022 09:08 by ADMIN

balazs

Created on: 30 Oct 2019 10:45

Category: Slider

Type: Feature Request

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

2 comments

ADMIN

Slavena

Posted on: 01 Dec 2022 09:08

Hi,

We are declining this feature request due to low customer demand and the presence of a viable workaround.

Regards,
Slavena
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN

Svet

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.