jquery - get value of ion-rangeslider in Angular

Question

I am using ion.rangeslider in my angular application and it displaying fine. But how can i get the value of the silder and i need to update min and max values of the slider dynamically.

I have seen some of the questions in SO like this ion-rangeslider not getting displayed and ion RangeSlider: customize grid in case of custom values. some of other solutions but they didn't help me.

my html is as follows

<div class="form-group">
      <input ionSlider id="sliderData" type="text" data-min="2000" data-from="2000" data-max="2800" data-type="single"
        data-step="5" data-prefix="$ " data-prettify="false" data-hasgrid="true" (onChange)="ionSliderForValues($event)">
    </div>

Component

ionSliderForValues(event:any){
    console.log(event);
  }

is there any other methods to get the value of the slider or any chance to get in angular way. suggest me you wil be well rewared, thank you.

Answer 1

I found a way to do this, with the help of ng2-ion-range-slider as @Ravikumar suggested. I felt there was no answer related to this in SO. That's why i am posting my answer here for some other who is stuck in same problem

For npm installation and Imports, do follow ng2-ion-range-slider documentation

component.html

   <div class="form-group">
            <ion-range-slider #sliderElement type="single" [min]="myMinVar" [max]="myMaxVar" grid_num="10" prefix="$ "
              [from]="currentValue" (onChange)="myOnChange($event)"></ion-range-slider>
   </div>

component.ts

  myOnChange(event: any) {
     console.log(event.from);
  }

you can change the min and max range of the slider dynamically by adding variables in component and assign them as attributes.