如何解决InstantSearch.js rangeSlider价格提示重叠问题

InstantSearch.js 的 rangeSlider 组件底层基于 Rheostat 实现，默认 tooltip 跟随滑块做绝对定位，当两个滑块游标间距过小时必然出现文字重叠。要实现提示文本固定不随滑块位移、仅游标可移动的效果，直接通过CSS覆盖默认样式即可，无需修改组件源码。

方案1：固定tooltip在滑块栏两端（完全无重叠风险） #

直接加入以下CSS，会把最小值提示固定在滑块区域左上角，最大值提示固定在滑块区域右上角，滑块拖动时提示位置完全不动，游标拖动交互不受任何影响：

/* 滑块容器预留顶部提示空间 */
.ais-RangeSlider .rheostat {
  position: relative;
  padding-top: 32px;
}
/* 重置tooltip默认跟随定位逻辑 */
.ais-RangeSlider .rheostat-tooltip {
  position: absolute !important;
  top: 0 !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}
/* 最小值提示固定在左侧 */
.ais-RangeSlider .rheostat-tooltip:first-of-type {
  left: 0 !important;
}
/* 最大值提示固定在右侧 */
.ais-RangeSlider .rheostat-tooltip:last-of-type {
  right: 0 !important;
}

该方案适配代码里的#price-range和#monthly-price-range两个滑块，不需要修改原有JS初始化逻辑，加完CSS直接生效。

方案2：保留跟随效果+自动避让重叠 #

如果不想把提示完全固定在两端，也可以自定义tooltip渲染逻辑，配合CSS实现间距足够时跟随滑块、间距过小时自动避让：

1. 修改原有rangeSlider初始化配置，替换默认的tooltips: true为自定义格式化配置：

// Filtre prix
if (document.querySelector('#price-range') !== null) {
    algoliaBmc.search.addWidgets([
        instantsearch.widgets.rangeSlider({
            container: '#price-range',
            attribute: 'price',
            precision: 0,
            step: isGoa ? 10 : 1000,
            pips: false,
            // 自定义tooltip格式
            tooltips: {
                format: (value) => `€${Math.round(value).toLocaleString()}`
            },
            cssClasses: {
                tooltip: 'range-tooltip'
            }
        })
    ]);
}

2. 加入自动避让样式：

.ais-RangeSlider .rheostat {
  padding-top: 32px;
}
.ais-RangeSlider .range-tooltip {
  min-width: 60px;
  text-align: center;
}
/* 左滑块提示默认对齐自身游标左侧 */
.rheostat-handle:first-of-type .range-tooltip {
  transform: translateX(-10%);
}
/* 右滑块提示默认对齐自身游标右侧 */
.rheostat-handle:last-of-type .range-tooltip {
  transform: translateX(-90%);
}

两种方案都可以彻底解决小间距下提示重叠无法辨识的问题，优先推荐方案1，实现成本最低无兼容问题。

内容的提问来源于stack exchange，提问作者Kimako