Я создаю мобильное приложение с ioni c, у меня есть два слайда диапазона в моем приложении, моя проблема в том, что событие изменения не срабатывает, пока я не перестану скользить, как я могу добавить прослушиватель событий к слайду диапазона так что, когда я его сдвигаю, он автоматически запускает функцию, причина, по которой я хочу это, заключается в том, что, поскольку они представляют собой слайд с двумя диапазонами, я хочу, чтобы любой из слайдов перемещался, у меня есть функция, которая автоматически изменит значение другой слайд, и я не хочу, чтобы другой слайд двигался только тогда, когда я перестаю скользить, я хочу, чтобы он двигался, как когда я перемещаю любой из слайдов
вот мой код
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.s css
*{
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)
}
Мобильное приложение - это видеопроигрыватель, который я хочу обрезать, поэтому хочу иметь возможность выбирать со временем, до какого времени я хочу обрезать видео