Reputation: 333
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
Upvotes: 0
Views: 734
Reputation: 2632
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)">
Upvotes: 1