在 Angular 中获取 ion-rangeslider 的值

Question

我在我的 angular 应用程序中使用 ion.rangeslider，它显示正常。但是我怎样才能得到 silder 的值，我需要动态更新滑块的最小值和最大值。

我在 SO 中看到了一些这样的问题 ion-rangeslider not getting displayed and ion RangeSlider: customize grid in case of custom values。其他一些解决方案，但它们对我没有帮助。

我的html如下

<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>

组件

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

是否有任何其他方法来获取滑块的值或是否有机会以 angular 方式获取。建议我你会得到很好的回报，谢谢。

Answer 1

我找到了一种方法，在 ng2-ion-range-slider 的帮助下，正如@Ravikumar 所建议的那样。我觉得在SO中没有与此相关的答案。这就是为什么我在这里为其他陷入同样问题的人发布我的答案

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);
  }

您可以通过在组件中添加变量并将它们指定为属性来动态更改滑块的最小值和最大值range。

在 Angular 中获取 ion-rangeslider 的值

get value of ion-rangeslider in Angular

jquery

smartadmin

ion-range-slider

angular