I recently incorporated a jquery-ui slider plugin into an angular 2 component and it's been working well overall, but I have encountered an annoying issue. Whenever the slider is used, there is a flickering effect on the screen. Interestingly, when I tried using the standard HTML5 slider instead, there was no flicker and the transition was smooth. However, the HTML5 slider only supports one handle whereas the jquery-ui slider supports two handles. How can I eliminate this flickering effect? I need help in identifying the root cause of this problem. I have created a detailed example here with additional comments.
export class RangeSlider implements OnInit {
@Input() value: any;
@Output() sliderChanged= new EventEmitter();
elementRef: ElementRef;
constructor(elementRef: ElementRef) {
this.elementRef = elementRef;
}
ngOnInit() {
let that = this;
let gradeLabels = ["K", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11","12"];
jQuery(this.elementRef.nativeElement).find('.rangeSlider').slider({
range: true,
min: 0,
max: gradeLabels.length-1,
values: [0, 12],
slide: function (event, ui) {
let min = ui.values[0]
let max = ui.values[1];
min = (min == 0) ? "K" : min;
let grade = (min == max) ? min : min + '-' + max;
that.sliderChanged.emit(grade);
}
}).slider("pips", {
rest: "label",
labels:gradeLabels
});
}