score:1

Accepted answer
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

Related Query

More Query from same tag