时间戳

首页 > 解决方案 > 如何在更新时获得反应 noUiSlider 最小最大值？

reactjs - 如何在更新时获得反应 noUiSlider 最小最大值？

问题描述

我正在尝试使用 noUiSlider 过滤我的结果。我使用 noUiSlider 组件来显示滑块。滑块正在显示，但我无法在幻灯片上获得最小最大值。我想在文本框中显示整数最小值最大值并将它们用于过滤器。

这就是我导入 noUislider 的方式

import '../../node_modules/nouislider/distribute/nouislider.css';
import Nouislider from 'react-nouislider';

<Nouislider
range={{min: 0, max: 800000}}
start={[20000, 500000]}
onSlide={this.onChangeSlide.bind(this)}
ref="NoUiSlider"
tooltips/>

我使用 onchange slide 方法来获取值，但它不起作用

onChangeSlide(){
   console.log(this.refs.NoUiSlider.slider.get()) // logs the value
}

我如何获得价值请帮助我

标签： reactjsnouislider

解决方案

onSlide回调已经给你一个数据，你只需要添加变量来获取数据。 

onSlide={(data)=> console.log(data)}

检查这个

演示

您可以添加onChangeSlide正常功能。如果您想在其中获取数据。

 onChangeSlide(data) {
    console.log(data) // logs the value
  }


 <Nouislider
        range={{ min: 0, max: 800000 }}
        start={[20000, 500000]}
        onSlide={this.onChangeSlide.bind(this)}
        ref="NoUiSlider"
        tooltips />

推荐阅读