I've been working on creating a custom toggle feature in Angular. While everything runs smoothly on desktop, I'm encountering issues on mobile devices. On desktop, the toggle works by clicking and dragging to the right, whereas on mobile, it should function by tapping and sliding to the right. However, this functionality doesn't seem to be working as expected on mobile.
You can check out a live example here on codesandbox.
I'm wondering what I might be doing wrong in my implementation. Any insights or suggestions would be greatly appreciated.
import { Component, ViewChild, ElementRef, Renderer2 } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@ViewChild("theSlider") theSlider: ElementRef;
@ViewChild("lock") theLock: ElementRef;
@ViewChild("banText") banText: ElementRef;
@ViewChild("timerText") timerText: ElementRef;
// Other component code here...
Template:
<div id="ban_button" (touchstart)="explainBanButton($event)" (mouseup)="explainBanButton($event)">
<div id="slider" #theSlider (touchend)="sliderDown($event)" (touchstart)="closeDrag($event)" (mousedown)="sliderDown($event)" (mouseup)="closeDrag($event)">
<span id="ban_text" #banText>Ban</span>
<div #timerText style="display: none;">
<span id='timer'>23:59:59</span><div id='lock' #lock></div>
</div>
</div>
<span class="ban_button--time__text">24h</span>
<div id="h24"></div>
</div>