jsx中ReactJS中的引导范围滑块答案

【问题标题】：bootstrap range slider in ReactJS in jsxjsx中ReactJS中的引导范围滑块
【发布时间】：2016-10-05 17:18:04
【问题描述】：

我想在 bootstrap-react 中选择一个带有两个滑块的范围。我已经这样做了，但它不起作用。

render: function () {
    return (
        <input
            type="range"
            value={this.props.value}
            min={this.props.min}
            max={this.props.max}
            on Input={this .props .handle Change}
            step={this.props.step} />
    );
}

但我想要两个范围滑块。我现在要做什么？我想根据滑块值选择值

【问题讨论】：

标签： twitter-bootstrap reactjs rangeslider

【解决方案1】：

我在开发 Web 应用程序时遇到了同样的问题。我在 npm 中发现了一些范围滑块。但是 react-nouisliider 是我解决您问题的建议。

安装

npm install react-nouislider --save

用法

import React from 'react';
import ReactDOM from 'react-dom';

import Nouislider from 'react-nouislider';

render: function(){
  return (
    <Nouislider
    range={{min: 0, max: 200}}
    start={[0, 100]}
    tooltips />
  );
}

完成这些步骤后，您应该将 css 文件包含在 noui-slider 文件夹中，否则您将得到一个只有数字的丑陋滑块。

import '(path_to_your_node_modules_folder)/node_modules/nouislider/src/nouislider.css';
import '(path_to_your_node_modules_folder)/node_modules/nouislider/src/nouislider.tooltips.css';
import '(path_to_your_node_modules_folder)/node_modules/nouislider/src/nouislider.pips.css';

你可以在这里找到 npm 链接noui-slider

【讨论】：

iam 使用 jsx 文件，iam 无法使用 import，以及 require 没有被使用。
除此之外还有什么办法吗？
你也可以使用require。 import 是 es6 格式的 require。不要将它分配给任何变量，只需要它。否则，您也可以将其添加到 html 页面的 src 中。 @Arron
jsx 也支持 import & require。只需在创建反应类React.createClass() 之前需要它。就像您使用 import React from 'react' 导入或要求 React 一样
在我的 jsx 中，显示 require 未定义，这里缺少什么，请指导我...

【解决方案2】：

这是我的情况，它有效：

<label>Opacity</label>
<input type="range" className="custom-range" id="customRange" 
min="0.1" max="1.0" step="0.05" 
value={this.state.opacity}
onChange={event => this.setState({ opacity: event.target.value })} >
</input>

当然，您的状态中需要一个名为 opacity 的属性：

componentWillMount() {
    this.setState({
      opacity : 0.9 
    });
  }

我在我的 react 项目中使用了 bootstrap 4。再见！

【讨论】：