如何在 Html/Css 和 React js 中实现这个滑块？ [关闭]答案

【问题标题】：How to Implement this slider in Html/Css and React js? [closed]如何在 Html/Css 和 React js 中实现这个滑块？ [关闭]
【发布时间】：2017-02-12 17:29:24
【问题描述】：

我是 Html/Css 和 React js 的新手。我很困惑，我不知道如何启动这个滑块如果有人知道如何实现这个或任何 jsfiddle。提前致谢

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

这里你有基本的例子，只需创建范围类型的输入，创建 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" />

【讨论】：