How to use createSliderWithTooltip

[jcubic]

The code from the documentation doesn't work. It gives a warning from TypeScript that you can replace require with import but it throws a runtime error:

react-dom.development.js:11865 Uncaught TypeError: createSliderWithTooltip is not a function

[vf-telwing]

@jcubic It looks like this library was refactored recently and the most recent documentation now exists in the docs/ directory. Here is the implementation included for the TooltipSlider: https://github.com/react-component/slider/blob/master/docs/examples/components/TooltipSlider.tsx

[jcubic]

I don't think I will waste more time on this.

[anik95]

Can you please let me know how this can be resolved?

This is what I have:
const { createSliderWithTooltip } = Slider;
const Range = createSliderWithTooltip(Slider.Range);

But this gives the following error:
Property 'createSliderWithTooltip' does not exist on type 'ForwardRefExoticComponent<SliderProps<number | number[]> & RefAttributes>'

[vf-telwing]

@anik95 Since createSliderWithTooltip no longer exists, the best reference point I was able to find is the TooltipSlider example: https://github.com/react-component/slider/blob/master/docs/examples/components/TooltipSlider.tsx

I think that component is the intended replacement for the code you are currently using.

[wzy1935]

I literally spent half of a day on this...

For anyone who encounter the same problem, my suggestions are:

• Use old version of rc-slider, i.e., v9.x.x;
• Use antd library instead, though it is huge;
• Use the template mentioned above;
• Giving up on the tooltip function, rc-tooltip is even more unreliable;

But if you insist on using this version of rc-slider by yourself, This is a cleaner example than the template above:

import React from "react";
import Slider from "rc-slider"; // 10.0.0
import Tooltip from "rc-tooltip"; // 5.1.1
import "rc-tooltip/assets/bootstrap_white.css";

export default () => (
  <div>
    <Slider
      handleRender={(node, handleProps) => {
        return (
          <Tooltip
            overlayInnerStyle={{ minHeight: "auto" }}
            overlay={"score: " + handleProps.value}
            placement="bottom"
          >
            {node}
          </Tooltip>
        );
      }}
      range
      min={0}
      max={10}
      defaultValue={[1, 2, 3]}
    ></Slider>
  </div>
);

Oh, never to mention that it generates error of ReactDOM.render is no longer supported in React 18 all the time.

Working on this is just WASTE OF TIME.

[rctngle]

I encountered the same issues described here. This variation of the example from @wzy1935 worked for me

<Slider
  handleRender={(node, handleProps) => {          
    return React.cloneElement(node, {
      children: (
        <>
        {node.props.children}
          <div style={{ position: 'absolute', top: -20 }}>
            {handleProps.value}
          </div>
        </>
      ),
    });
  }}
  range
  min={0}
  max={10}
  defaultValue={[1, 2, 3]}
>
</Slider>