Getting Values From StencilJS Components on Angular

I wanted to create a range slider with 2 knobs. I did it but i cannot react the input values from angular side I tried @Event and @Hostlistener but it didnt worked i found that with value accessors i can do it but that is with one componnet i used two

import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';

@Component({
  tag: 'ulogi-slider',
  styleUrl: 'ulogi-slider.scss',
  shadow: true,
})
export class UlogiSlider {
  
  @Prop() sliderMinValue=0
  @Prop() sliderMaxValue=100


  @Event() sliderMinChange: EventEmitter<string>;
  @Event() sliderMaxChange: EventEmitter<string>;


 
 

   sliderOne!:HTMLInputElement
   sliderTwo!:HTMLInputElement
   sliderTrack!:HTMLElement
   

 @Prop() minGap = 10;
 componentDidLoad(){
  this.slideOne()
  this.slideTwo()
 }
 
 slideOne(){
    if(parseInt(this.sliderTwo.value) - parseInt(this.sliderOne.value) <= this.minGap){
      this.sliderOne.value = String(parseInt(this.sliderTwo.value) - this.minGap);
    }
    this.fillColor();
    console.log('slider 1 value',this.sliderOne.value)
    this.sliderMinChange.emit(this.sliderOne.value)
    console.log('slider 1 event',this.sliderMinChange)
}
 slideTwo(){
    if(parseInt(this.sliderTwo.value) - parseInt(this.sliderOne.value) <= this.minGap){
      this.sliderTwo.value = String(parseInt(this.sliderOne.value) + this.minGap);
    }
    this.fillColor();
    this.sliderMaxChange.emit(this.sliderTwo.value)
}
 fillColor(){
   const percent1 = (+this.sliderOne.value / +this.sliderMaxValue) * 100;
    const percent2 = (+this.sliderTwo.value / +this.sliderMaxValue) * 100;
    this.sliderTrack.style.background = `linear-gradient(to right, #dadae5 ${percent1}% , var(--secondary-secondary) ${percent1}% , var(--secondary-secondary) ${percent2}%, #dadae5 ${percent2}%)`;
}


  render() { 

    return <div class="wrapper" ref={(el) => this.sliderTrack = el as HTMLInputElement}>
    <div class="container">
        <div class="slider-track"></div>
        <input type="range" ref={(el) => this.sliderOne = el as HTMLInputElement} min={this.sliderMinValue} max={this.sliderMaxValue} value={this.sliderMinValue}  onInput={()=>this.slideOne()}/>
        <input type="range" ref={(el) => this.sliderTwo = el as HTMLInputElement} min={this.sliderMinValue} max={this.sliderMaxValue} value={this.sliderMaxValue}  onInput={()=>this.slideTwo()}/>
    </div>
</div>
  }
}

my stenciljs components is like this

I am listening to event that triggers when min knob changed but log says event is undefined ``

@HostListener('sliderMinChange') sliderMinChange(event: CustomEvent) {
    console.log('sliderMinChange', event);
  }

``