How to use the rc-slider.createSliderWithTooltip function in rc-slider

// @flow
import React, { Component } from 'react';
import Typography from '@material-ui/core/Typography';
import 'rc-slider/assets/index.css';
import Slider, { createSliderWithTooltip } from 'rc-slider';
import { withStyles } from '@material-ui/core/styles';

const SliderWithTooltip = createSliderWithTooltip(Slider);

// need whiteSpace: 'pre' so it doesn't wrap. rc-slider's width was forcing them to be too small
const marginSlider = 24;
const marginButton = 8;
const styles = {
  leftText: {
    whiteSpace: 'pre',
    marginLeft: marginButton,
    marginRight: marginSlider,
  },
  rightText: {
    whiteSpace: 'pre',
    marginLeft: marginSlider,
    marginRight: marginButton,
  },
};

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Slider, { Range, Handle, createSliderWithTooltip } from 'rc-slider';

const SliderWithTooltip = createSliderWithTooltip(Slider);
const RangeWithTooltip = createSliderWithTooltip(Range);

ReactDOM.render(
    ,
    document.querySelector('.app')
);

ReactDOM.render(
    ,
    document.querySelector('.another-app')
);

Who robs cavefish of their sight?
Who rigs every Oscar night?`.split("\n");

const layouts = ["Pinterest", "Simple"];
const enterExitStyles = [
  "Simple",
  "Skew",
  "Newspaper",
  "Fold Up",
  "From Center",
  "From Left to Right",
  "From Top",
  "From Bottom"
];

const SliderWithTooltip = createSliderWithTooltip(Slider);

export default class extends Component {
  static defaultProps = {
    minItems: 10
  };

  constructor(props) {
    super(props);

    this.state = {
      data: this.generateData(),
      useCSS: false,
      responsive: false,
      layout: camelCase(layouts[0]),
      enterExitStyle: camelCase(enterExitStyles[0]),
      duration: 800,

tooltipFormatter,
    vertical,
    style,
    className,
    onChange,
    ...rest
  } = props;

  const expressionFn = tooltipFormatter
    ? value =>
        new Function('', 'return `' + tooltipFormatter + '`').bind(value)()
    : value => value;

  const Component = multiple ? BaseSlider.Range : BaseSlider;
  const RenderSlider = showTooltip
    ? createSliderWithTooltip(Component)
    : Component;

  const tooltipProps = {
    placement: tooltipPlacement,
  };

  const handleAfterChange = value => {
    onChange(value);
  };

  const sliderProps = omit(rest, ['value']);

  return (

import { COLORS, IS_MOBILE_USER_AGENT } from '../../constants';

import InputLabel from '../InputLabel';

type Props = {
  width: number,
  label: string,
  min?: number,
  max?: number,
  step?: number,
  value?: number,
  defaultValue?: number,
  onChange: (val: number) => void,
};

const RcSliderWithTooltip = createSliderWithTooltip(RcSlider);

class Slider extends PureComponent {
  render() {
    const { label, ...delegatedProps } = this.props;

    return (
      <div style="{{">
        

        
      </div>
    );
  }

constructor(props) {
        super(props);
        this.propsToState = this.propsToState.bind(this);
        this.DashSlider = props.tooltip
            ? createSliderWithTooltip(ReactSlider)
            : ReactSlider;
        this._computeStyle = computeSliderStyle();
    }

import React from 'react';
import PropTypes from 'prop-types';
import Slider, { createSliderWithTooltip } from 'rc-slider';
import lodashDebounce from 'lodash/debounce';

const SliderWithTooltip = createSliderWithTooltip(Slider);
const percentFormatter = function(v) {
  return `${v} %`;
};
/*
 * A react component, Builds a rather specific
 * interactive widget
 *
 * @class OpacitySlider
 * @extends React.Component
 */
class OpacitySlider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value
    };

showTooltip,
    tooltipPlacement,
    tooltipFormatter,
    vertical,
    style,
    className,
    ...rest
  } = props;

  const expressionFn = tooltipFormatter
    ? value => new Function('', 'return ' + tooltipFormatter).bind(value)()
    : value => value;

  const Component = multiple ? BaseSlider.Range : BaseSlider;
  const RenderSlider = showTooltip
    ? createSliderWithTooltip(Component)
    : Component;

  const tooltipProps = {
    placement: tooltipPlacement,
  };

  return (
    
  );

import React, { Component } from 'react';
import { Field, FieldProps, Formik } from 'formik';
import Slider, { createSliderWithTooltip, Marks } from 'rc-slider';

import translate, { translateRaw } from 'v2/translations';
import { GAS_PRICE_DEFAULT } from 'v2/config';
import { GasEstimates, IFormikFields, Network } from 'v2/types';
import './GasPriceSlider.scss';

const SliderWithTooltip = createSliderWithTooltip(Slider);

interface OwnProps {
  gasPrice: string;
  handleChange: Formik['handleChange'];
  gasEstimates: GasEstimates;
  network: Network;
}

type Props = OwnProps;

interface State {
  hasSetRecommendedGasPrice: boolean;
  realGasPrice: number;
}

interface GasTooltips {

import 'rc-slider/assets/index.css';

import React from 'react';
import RcSlider, { createSliderWithTooltip } from 'rc-slider';

import Typography from 'src/common/components/Typography';

const RcSliderWithTooltip = createSliderWithTooltip(RcSlider);

import injectSheet from 'react-jss';

const styles = ({ palette }) => ({
  '@global': {
    '.rc-slider-handle': {
      border: `solid 4px ${palette.primary[500]}`,
      '&:active': {
        boxShadow: [0, 0, 5, palette.primary[500]],
      },
      '&:active, &:hover': {
        borderColor: palette.lighten(palette.primary[500], 20),
      },
    },
  },
});