Open jcubic opened 1 year ago
@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
I don't think I will waste more time on this.
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
@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.
I literally spent half of a day on this...
For anyone who encounter the same problem, my suggestions are:
rc-slider
, i.e., v9.x.x;antd
library instead, though it is huge;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.
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: