Ionic on change event not working properly

Question

I am building a mobile app with ionic, I have two range slides in my app, my problem is that the change event does not fires until i stop sliding, how can i add an event listener to the range slide so that as i am sliding it, it will automatically run the function, the reason i want this is that since they are two range slide, i want as any of the slides is moving, i have a function that will automatically change the value of the other slide, and i dont want the other slide to move only when i stop sliding, i want it to move as as i move any of the slides

here is my code

test.page.html

    <div class="wrap" role="group" aria-labelledby="multi-lbl">
                    <label class="sr-only" for="a">Value A:</label>
                    <input (change)="onChangeVal(1)" name="min" id="a" type="range" min="0" [max]="VidDuration" [(ngModel)]="range.min"/>
                    <label class="sr-only" for="b">Value B:</label>
                    <input (change)="onChangeVal(2)" name="max" id="b" type="range" min="0" [max]="VidDuration" [(ngModel)]="range.max"/>
                </div>

test.page.scss

    *{
        font: inherit;
    }
    .wrap {
        --a: -30; 
        --b: 20; 
        --min: -50; 
        --max: 50;
        --dif: calc(var(--max) - var(--min));
        display: grid;
        grid-template: repeat(2, -webkit-max-content) 4em/ 1fr 1fr;
        grid-template: repeat(2, max-content) 4em/ 1fr 1fr;
        overflow: hidden;
        position: absolute;
        bottom: 1% !important;
        width: 100%;
        height: 52px !important;
        background: black;
    }
    .wrap::before, .wrap::after {
        grid-column: 1/ span 2;
        grid-row: 3;
        background: transparent;
        content: "";
    }
    .wrap::before {
        margin-left: calc(1em + (var(--a) - var(--min))/var(--dif)*18em);
        width: calc((var(--b) - var(--a))/var(--dif)*18em);
    }
    .wrap::after {
        margin-left: calc(1em + (var(--b) - var(--min))/var(--dif)*18em);
        width: calc((var(--a) - var(--b))/var(--dif)*18em);
    } 
    [id='multi-lbl'] {
        grid-column: 1/span 2;
    }
    .wrap, input[type='range']{  
        z-index:100000 !important;
    }
    .sr-only {
        position: absolute;
        -webkit-clip-path: inset(50%);
        clip-path: inset(50%);
    }
    input[type='range'] {
        grid-column: 1/ span 2;
        grid-row: 3;
        z-index: 1;
        top: 0;
        left: 0;
        margin: 0;
        background: none;
        --col: transparent;
        pointer-events: none;
        border: 1px solid #f51646;
    }
    input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb, input[type='range'] {
        -webkit-appearance: none;
    }
    input[type='range']::-webkit-slider-runnable-track {
        width: 100%;
        height: 105%;
        background: none;
    }
    input[type='range']::-moz-range-track {
        width: 100%;
        height: 105%;
        background: none;
    }
    input[type='range']::-webkit-slider-thumb {
        border: none;
        width: 2em;
        height: 4em;
        border-radius: 0;
        background: linear-gradient(90deg, #fff 2px, transparent 0) calc(1em - 1px), radial-gradient(circle, var(--col) calc(1em - 1px), transparent 1em);
        pointer-events: auto;
    }
    input[type='range']::-moz-range-thumb {
        border: none;
        width: 2em;
        height: 4em;
        border-radius: 0;
        background: linear-gradient(90deg, #fff 2px, transparent 0) calc(1em - 1px), radial-gradient(circle, var(--col) calc(1em - 1px), transparent 1em);
        pointer-events: auto;
    }
    input[type='range']:focus {
        z-index: 2;
        outline: dotted 1px currentcolor;
    }

test.page.ts

    onChangeVal(w) {
        let vvid:any = document.getElementById("video");
        vvid.pause()
        clearTimeout(this.time_out)
        if(w==1) this.range.max=(this.range.max <= this.VidDuration) ? this.range.min+this.max : this.VidDuration
        else if((this.range.max-this.range.min)>this.max) this.range.min=this.range.max-this.max 
        else if(this.range.max <= this.range.min) this.range.max=this.range.min
        console.log(this.range)
    }

The mobile app is a video player the i want to trim so i want to be able to choose from with time to which time i want to trim the video

Answer 1

I would sugest to use the input or ionInput event:

<input (input)="onChangeVal(1)">
<input (ionInput)="onChangeVal(2)">

Because you use [(ngModel)] you could also use ngModelChange:

<input (ngModelChange)="onChangeVal(1)">