在 Angular 中获取 ion-rangeslider 的值答案

【问题标题】：get value of ion-rangeslider in Angular在 Angular 中获取 ion-rangeslider 的值
【发布时间】：2018-11-26 10:50:59
【问题描述】：

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

我在 SO 中看到过一些类似 ion-rangeslider not getting displayed 和 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);
  }

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

【问题讨论】：

用这个github.com/PhilippStein/ng2-ion-range-slider，我不知道你是如何在angular中实现jquery脚本的，但我希望这能工作

标签： jquery angular smartadmin ion-range-slider

【解决方案1】：

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

对于 npm 安装和导入，请遵循 ng2-ion-range-slider 文档

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。

【讨论】：