获取Angular中离子测距滑块的值 [英] get value of ion-rangeslider in Angular

问题描述

我在我的角度应用程序中使用了ion.rangeslider，它显示正常. 但是如何获取silder的值，并且需要动态更新滑块的最小值和最大值.

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.

我在SO中看到了一些这样的问题，例如 ion-rangeslider无法显示和 ion RangeSlider:在自定义值的情况下自定义网格.其他一些解决方案，但它们并没有帮助我.

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.

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

是否还有其他方法可以获取滑块的值，或者是否有任何其他机会获取角度值.建议我，请您多加注意，谢谢.

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.

推荐答案

在 ng2-ion-range-slider ，如@Ravikumar建议的那样.我觉得在SO中没有与此相关的答案.这就是为什么我在这里将我的答案发布给其他陷入同样问题的人

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

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

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.

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

这篇关于获取Angular中离子测距滑块的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！