Question

我想在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} />
    );
}

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

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

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

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

您可以在noui-slider

找到npm链接

Answer 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。再见！

jsx中ReactJS中的bootstrap范围滑块

2 个答案: