Tooltip is not moving when dragging on the slider

[nadireaziz]

Hi,

Just clone this repo and did yarn install and yarn run start, everything works fine except for the tooltip is not moving when i drag on the slider, possible error for newly update rc-align.

Thanks,

[CatYanish]

I have the same problem. The tooltip appears and the values are correct, but the animations don't appear to be working. Any help here would be greatly appreciated! It is the only thing between me and success!

Thanks

import React, { Component } from 'react'
import PropTypes from 'prop-types'
// import Slider from 'rc-slider'
import Slider from 'rc-slider'

import FormattedCurrency from 'atoms/Formats/FormattedCurrency'
import styled from 'styled-components'

const LabelStyle = styled.span`
  white-space:nowrap
`

const SliderStyle = styled.div`
  padding: 24px 32px 32px 28px;
  width: 250px;


`

const createSliderWithTooltip = Slider.createSliderWithTooltip
const Range = createSliderWithTooltip(Slider.Range)

class RangeSlider extends Component {
  shouldComponentUpdate (nextProps) {
    const { filterOptions } = nextProps
    if (Object.keys(filterOptions).length === 0) {
      return false
    }
    return true
  }

  render () {
    const { filterOptions, toggleFilter, filter } = this.props

    if (Object.keys(filterOptions).length === 0) {
      return null
    }

    const min = 0
    let max

    const marks = filterOptions.reduce((obj, item, index) => {
      if (index === 0) {
        // min = item.value.min
        obj[item.value.min] = <FormattedCurrency amount={min}/>
      } else if (index === filterOptions.length - 1) {
        max = item.value.min
        const maxValue = <FormattedCurrency amount={item.value.min}/>
        obj[item.value.min] = <LabelStyle>{maxValue}+</LabelStyle>
      } else {
        obj[item.value.min] = ''
      }
      return obj
    }, {})

    return (

      <div className="lobby-filter-dropdown">
        <SliderStyle>
          <Range
            defaultValue={[min, max]}
            min={min}
            max={max}
            step={5}
            marks={marks}
            onAfterChange={(value) => {
              const rangeValue = {
                min: value[0],
              }

              if (value[1] !== max) {
                rangeValue.max = value[1]
              }

              const querySafeValue = filter.getQuerySafeValue(rangeValue)
              toggleFilter(filter.filterKey, querySafeValue, filter.multiselect)
            }}
            tipFormatter={value => `${value}`}

            placement={this.state.placement}

          />
        </SliderStyle>
      </div>

    )
  }
}

RangeSlider.propTypes = {
  filterOptions: PropTypes.array.isRequired,
  toggleFilter: PropTypes.func.isRequired,
  filter: PropTypes.object.isRequired,
  index: PropTypes.number,
  tipFormatter: PropTypes.func,
}

export default RangeSlider

[clearwaterstream]

Hi, having the same issue. The value in the tooltip is correct, however tooltip is not moving along with the slider.

Also, I think there is a more sinister issue here. The rc-slider component is linked to other react libs by using "^.x.x" vs doing a specific dependency resolution.

If the dependency got updated, there is no guarantee rc-slider will work unless someone keeps testing / updating rc-slider every time a new version of a dependent library gets released.

I think the reason for the current issue is that indeed one or several of dependent libraries released a new version and now rc-slider stopped working with the latest version of dependancies.

Should rc-slider use an exact dependency resolution model?

[frangolet]

I had same issue and manage to fix it by adding :

      align={{
        offset: [0, -5],
      }}

to the Tooltip

Here is, how my handle looks now:

const myHandle = ({value, dragging, index, ...restProps}) => {

  return (
    <Tooltip
      prefixCls="rc-slider-tooltip"
      overlay={value}
      visible={dragging}
      placement="top"
      align={{
        offset: [0, -5],
      }}
      key={index}
    >
      <Handle {...restProps} />
    </Tooltip>
  )
}

[nadireaziz]

@asfwebmaster Thanks for the solution and it worked! I will just provide more visual gif image for other users if they have same issues.

[yigor]

After digging down the dependency tree I can confirm that this was broken by latest rc-align release (which is dependency of dependency of dependency). So I got it working by pinning rc-align version to 2.3.5 in my package.json file.

[clearwaterstream]

Thanks @yigor for pinning down the culprit.

[adriandmitroca]

Just a note for future readers - nowadays you also need to lock your rc-tooltip dependency at 3.x version as it's again broken on 4.x

[verekia]

I couldn't get it to work with all those tweaks. If someone could post the combination of packages that work with v9 of slider that would be great.

An other option that worked for me was to stick to "rc-slider": "8.7.1",. No need for rc-tooltip or rc-align. This one actually works as expected 👍

[jbraccinibh]

I will try that @verekia Thanks for your input

[kvalium]

Facing the same issue here, I've installed version 8.7.1 as @verekia recommends, Yarn installed those dependencies:

info Direct dependencies
└─ [email protected]
info All dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

But my tooltip is still broken. I've downgrade rc-align to version 2.3.5, but the UI does not improve... Any advice to fix this? :)

EDIT; Just clean relaunch my front-end, and the issue does not occurs anymore, so the @verekia solution works great!

[andreiho]

@kvalium If you don't want to rely on the default tooltip, you can create your own without any complicated positioning, by simply rendering content inside the Handle component. This way the text will always move with the handle.

Here's a demo of this. You can take this as far as you need with CSS.

[sogolsadeghian59]

I couldn't get it to work with all those tweaks. If someone could post the combination of packages that work with v9 of slider that would be great.

An other option that worked for me was to stick to "rc-slider": "8.7.1",. No need for rc-tooltip or rc-align. This one actually works as expected 👍

THANK YOU

[tllongdev]

I added this: "resolutions": { "rc-align": "2.3.5" }, to my package.json file.

It resolved the issue with "rc-slider":"^9.3.1".

I tried 8.7.1 and found that, while it does resolve this issue, other issues were presented.

[Josmaralejandro]

It worked for me @tllongdev, thanks!