createSliderWithTooltip not working/Can't get tooltips to work in v10

[CBurrows87]

Hi, I am having major issues gettin the Tooltip to work on a range slider. I have tried following examples and other "solutions" but they all seem to have a problem with the latest version? Not sure if I am missing anything obvious...

Any help would be greatly appreciated!

[powah]

Yes, I'm encountering the same

[SalahAdDin]

Yeah, the documentation is obsolete now!

[JFKelly68]

Same, the docs are no longer accurate

[thedaviddias]

Was the Range component removed or just merged with Slider?

[SalahAdDin]

Was the Range component removed or just merged with Slider?

Good question.

[Sonadi1]

I was able to get the tooltip working with this example but can't seem to figure out how to get them working correctly with a range slider.

[kiranbdeshmukh]

Solution could be: #825 (comment)

[YannickBochatay]

For a result very similar to previous versions, with hover and focus display, handling of multiple values, you can use this code :

In a CSS file :

.rc-slider [data-slider-tooltip]::before,
.rc-slider [data-slider-tooltip]::after {
  position: absolute;
  top: -6px;
  left: 50%;
  display:none;
}
.rc-slider [data-slider-tooltip]::before {
  content: "";
  transform: translateX(-50%);
  border-width: 4px 6px 0 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.7) transparent transparent transparent;
}
.rc-slider [data-slider-tooltip]::after {
  content:attr(data-slider-tooltip);
  transform: translateX(-50%) translateY(-100%);
  background: rgba(0,0,0,0.7);
  text-transform:none;
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  pointer-events: none;
  padding: 4px 4px;
}
.rc-slider:active [data-slider-tooltip]::before,
.rc-slider:active [data-slider-tooltip]::after,
.rc-slider-handle:hover [data-slider-tooltip]::before,
.rc-slider-handle:hover [data-slider-tooltip]::after {
  display:block;
}

In your jsx code :

<Slider
   handleRender={ renderProps => (
      <div { ...renderProps.props }>
        <div data-slider-tooltip={ renderProps.props["aria-valuenow"] }/>
      </div>
    ) }
/>

It will look like this :