jsx의 ReactJS에있는 부트 스트랩 범위 슬라이더

Question

부트 스트랩 반응에서 두 개의 슬라이더가있는 범위를 선택하고 싶습니다. 나는 이것을했지만 작동하지 않는다.

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

웹 응용 프로그램을 개발할 때 동일한 문제가 발생했습니다. npm에 일부 범위 슬라이더가 있습니다. 그러나 react-nouisliider는 문제를 해결하기위한 제 제안입니다.

설치 당신이 그렇지 않으면 당신은 숫자 만이있을 것이다 못생긴 슬라이더를 얻을 것이다 noui 슬라이더 폴더에 CSS 파일을 포함해야 다음 단계 후

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

.

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

당신은 가져 오기를 사용하려면 스피없는 jsx 파일을 사용하여 여기 noui-slider