Problem with aligment
I use the slider control while the renderedTicks method however it does not work after the page is fired only after changing the screen resolution this method is called. The text label is not aligned.
[ticks]='slider_ticks' [step]='step' (created)='created()' (renderedTicks)='renderedTicks($event)'
(change)='change($event)' formControlName="totalAssessmentId" [readonly]="isReadonly">
created() {
setTimeout(() => {
this.sliderTrack = document.getElementById('dynamic_color_slider').querySelector('.e-slider-track');
this.sliderHandle = document.getElementById('dynamic_color_slider').querySelector('.e-handle');
(this.sliderHandle as HTMLElement).style.backgroundColor = 'green';
(this.sliderTrack as HTMLElement).style.backgroundColor = 'green';},100);
}
renderedTicks(args: SliderTickRenderedEventArgs) {
const li: any = args.ticksWrapper.getElementsByClassName('e-large');
const remarks: any = ['Satysfakcjonująca', 'Wystarczająca', 'Niesatysfakcjonująca', 'Krytyczna'];
for (let i = 0; i < li.length; ++i) {
(li[i].querySelectorAll('.e-tick-both')[0] as HTMLElement).innerText = '';
(li[i].querySelectorAll('.e-tick-both')[1] as HTMLElement).innerText = remarks[i];
}
}
 |
