如何在Html/Css和React js中實現這個滑塊？

Question

我是新來的HTML/CSS和應對js.I感到很困惑，我不知道如何如果任何人有一個想法如何實現此或任何的jsfiddle .Thanks提前啓動該滑塊

Answer 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" />