Ion.RangeSlider change status in Angular 7

Question

I'm using Ion.RangeSlider in Angular7 project. When I want to update the slider I use following code:

var instance: any = $(".irs-hidden-input").data("ionRangeSlider");

        instance.update({
            from: Math.floor(Math.random() * (10)),
            to: 10
        });

The $ sign is like to jQuery mode, How I can read data from @ViewChild?

Thanks for taking the time and explain it.

`How I can read data from @ViewChild?` is there any child kind of relation between your code — Ganesh, Jun 01 '19 at 06:05
Yes, There is. @ViewChild("slider") slider: ElementRef; and But I can't read it. — Saeid Mirzaei, Jun 01 '19 at 06:13
I catch the error: this.slider.nativeElement.data is not a function — Saeid Mirzaei, Jun 01 '19 at 06:17

score 1 · Accepted Answer · answered Jun 01 '19 at 06:43

I will recommend to use ng2-ion-range-slider instead of Ion.RangeSlider. Because i was faced same kind of issues to catch the update and change events of Ion.RangeSlider in Angular then i found this one.

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

ng2-ion-range-slider now optimized for easy use as an importable Angular 2 Module and installable using npm and it is built on top of Ion.RangeSlider so that we can access all the features of it in easy way.

<ion-range-slider #sliderElement
          type="double"
          [min]="myMinVar"
          max="100"
          from="28"
          from_min="10"
          from_max="30"
          from_shadow="true"
          to="40"
          to_min="40"
          to_max="90"
          to_shadow="true"
          grid="true"
          grid_num="10"
          prefix="Weight: "
          postfix=" million pounds"
          decorate_both="false"
          (onUpdate)="myOnUpdate($event)"
          (onChange)="myOnChange($event)"
          (onFinish)="myOnFinish($event)"></ion-range-slider>

I have answered same kind of issue get value of ion-rangeslider in Angular check it once..

Ion.RangeSlider change status in Angular 7

1 Answers1