Question

如何从rcslider第三方component.git获取最小值和最大值。 http://react-component.github.io/slider/ 我安装了rcslider组件并使用示例代码

＆＃13;

<section style="background-color: #00bfff">
  <div class="home">
    <mdb-carousel [isControls]="false" class="carousel slide carousel-fade" [animation]="'fade'">
      <mdb-slide>
        <div class="container-fluid">
          <div class="home-slider">
            <div></div>
            <div class="home-head">
              <p class="home-head-1">Get your personal career coach</p>
              <br>
              <button class="home-button">KNOW MORE</button>
            </div>
            <div>
              <img class="img-fluid home-img mx-auto d-block" src="/assets/images/slider/1.png" alt="boardinfinity" style="margin-bottom:25px;">
            </div>
          </div>
        </div>
      </mdb-slide>
      <mdb-slide>
        <div class="container-fluid">
          <div class="home-slider">
            <div></div>
            <div class="home-head">
              <p class="home-head-1">Get a career boost with great jobs.</p>
              <br>
              <button class="home-button">KNOW MORE</button>
            </div>
            <div>
              <img class="img-fluid home-img mx-auto d-block" src="/assets/images/slider/2.png" alt="boardinfinity" style="position: relative;top: 3px;">
            </div>
          </div>
        </div>
      </mdb-slide>
    </mdb-carousel>
  </div>
</section>

＆＃13;

如何从rcslider第三方component.git获取最小值和最大值。 http://react-component.github.io/slider/

Answer 1

我已经习惯了onChange函数来改变滑块的最小值和最大值。这解决了我的问题

import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Tooltip from 'rc-tooltip';
import Slider from 'rc-slider';

const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);
const Handle = Slider.Handle;

const handle = (props) => {
  const { value, dragging, index, ...restProps } = props;
  return (
    <Tooltip
      prefixCls="rc-slider-tooltip"
      overlay={value}
      visible={dragging}
      placement="top"
      key={index}
    >
      <Handle value={value} {...restProps} />
    </Tooltip>
  );
};

const wrapperStyle = { width: 400, margin: 50,padding:20 };
class Rangeslider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: [0, 5000],
    };
  }


render(){
  return(
    <div>
  <div>
   
    <div style={wrapperStyle}>
      <p>Range with custom handle</p>
      <Range min={0}
            max={5000}
            defaultValue={this.state.value}
            allowCross={false}
            onChange={value=>this.setState({value})} />
    <span>${this.state.value[0]}</span>  
    <span style={{float:"right"}}>${this.state.value[1]}</span>  
    </div>
  </div>
  </div>
  )
}
}
export default Rangeslider

如何从rc滑块第三方组件获取最小值和最大值

1 个答案: