javascript - 如何在HTML/CSS和React js中实现此滑块？

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        2年前关闭。
                                                                                            
                
        
我是Html / Css和React js的新手，我很困惑，我也不知道如何启动此滑块。

最佳答案

在这里，您有一个基本示例，只需创建具有范围类型的输入，创建onChange方法并将其绑定到输入onChange方法，那么您所需要做的就是对组件进行样式设置，希望对您有所帮助：)

class Slider extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      sliderValue: 0,
    }
  }

  onChange = (e) => {
    console.log(e.target.value)
    this.setState({ sliderValue: e.target.value });
  }

  render () {
    return (
      <div>
        <span class="range-slider__value">{this.state.sliderValue}</span>
        <input className="range-slider__range" type="range" value={this.state.sliderValue} min="0" max="500" onChange={this.onChange.bind(this)} />
      </div>
    )
  }
}

// Render it
ReactDOM.render(
  <Slider />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" />