search

react-component / slider

React Slider
https://slider.react-component.now.sh/
MIT License
3.05k stars 776 forks source link

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

Open CBurrows87 opened 2 years ago

CBurrows87 commented 2 years ago

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 commented 2 years ago

Yes, I'm encountering the same

SalahAdDin commented 2 years ago

Yeah, the documentation is obsolete now!

JFKelly68 commented 2 years ago

Same, the docs are no longer accurate

thedaviddias commented 2 years ago

Was the Range component removed or just merged with Slider?

SalahAdDin commented 2 years ago

Was the Range component removed or just merged with Slider?

Good question.

Sonadi1 commented 2 years ago

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 commented 2 years ago

Solution could be: https://github.com/react-component/slider/issues/825#issuecomment-1084416952

YannickBochatay commented 2 weeks ago

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 :

image