{"size": 959, "ext": "js", "max_stars_repo_path": "tinper-bee/bee-slider/demo/demolist/Demo8.js", "max_stars_repo_name": "JetXing/mtl-api", "max_stars_repo_stars_event_min_datetime": "2017-01-05T00:36:19.000Z", "max_stars_repo_stars_event_max_datetime": "2020-01-05T10:47:19.000Z", "max_issues_repo_path": "tinper-bee/bee-slider/demo/demolist/Demo8.js", "max_issues_repo_name": "JetXing/mtl-tools", "max_issues_repo_issues_event_min_datetime": "2017-08-29T11:24:18.000Z", "max_issues_repo_issues_event_max_datetime": "2018-05-13T09:04:38.000Z", "max_forks_repo_path": "tinper-bee/bee-slider/demo/demolist/Demo8.js", "max_forks_repo_name": "JetXing/mtl-tools", "max_forks_repo_forks_event_min_datetime": "2018-08-29T06:07:02.000Z", "max_forks_repo_forks_event_max_datetime": "2020-01-02T08:36:15.000Z"}
{"max_stars_count": 7, "max_issues_count": 5, "max_forks_count": 4, "avg_line_length": 25.9189189189, "max_line_length": 103, "alphanum_fraction": 0.6016684046}
/**
*
* @title 带tip的slider
* @description 和 tip展示 组件保持同步。
*
*/

import React, { Component } from 'react';
import Slider from '../../src';

const createSliderWithTooltip = Slider.createSliderWithTooltip;
const RangeTooltip = createSliderWithTooltip(Slider.Range);
const SliderTooltip = createSliderWithTooltip(Slider);

class Demo8 extends Component {
	log = (value) =>{
	console.log(value); //eslint-disable-line
	}

	render () {
		const wrapperStyle = { width: 400, margin: 50 };
		return (
      <div>
        <div style={wrapperStyle}>
          <p>Slider with Tooltip</p>
          <SliderTooltip min={0} max={100} defaultValue={45} tipFormatter={value => `${value}%`}/>
        </div>
        <div style={wrapperStyle}>
          <p>Range with Tooltip</p>
          <RangeTooltip min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
        </div>
      </div>
		)
	}
}

export default Demo8;