I am currently developing a survey application that utilizes ngx-sliders. However, I have encountered an issue on mobile devices where users unintentionally trigger the slider while scrolling through rows of slider questions, resulting in unintended changes to their answers.
I have attempted to disable the slider on the (touchmove) event, but it only works after the slider value has already been changed. Disabling it on (touchstart) does not yield the desired results either. Even after trying the touchEventsInterval slider option and using event.preventDefault(), I have had no success.
My latest attempt involves accessing the slider with ElementRef. One potential solution is to set the slider as readonly, detect a click at its position, mark that specific tick as active by changing its class, but I am facing difficulties in implementing this approach. I am uncertain if this method is effective or feasible.
At this point, I am running out of ideas and seeking advice on how to address this issue.
Here is a snippet of the HTML code:
<div class="slider-field hide-value-ticks mb-5">
<div class="subtitle-black mb-4">{{answer.rowAnswerText ?? ''}} {{answer.columnAnswerText}}</div>
<ngx-slider
*ngIf="options"
class="touch-slider"
[value]="selectedAnswer"
(valueChange)="sliderValueChange($event)"
[options]="options"
(click)="onClick($event)
#sliderNgx
></ngx-slider>
</div>
And here is the .ts file:
export class PathfinderStepSliderComponent implements OnInit {
// Add the TypeScript code here
}