React RC-Slider Grab 与标签上的指针

Question

我正在尝试使用库 RC-Slider：

https://github.com/react-component/slider

然后，当我制作自定义标签时，我会在标签上看到一个指针，而不是能够抓取文本。如何使文本也可滑动？我不能在透明背景下使用 zIndex，因为那样我会看到导轨。我不确定如何确保我可以抓住并滑动整个气泡。这里有2张图片来演示：

可滑动气泡：

标签是指针而不是抓取：

import React, { useState } from 'react';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';

const SliderFunc = () => {
  const [value, setValue] = useState(3);

  const handleChange = (value) => {
    setValue(value)
  }

  const wrapperStyle = { width: 350, margin: 50 };

  return (
    <div style={wrapperStyle}>
      <Slider min={1}
        value={value}
        onChange={handleChange}
        max={5} marks={{
          1: {
            style: value === 1 ? {
              width: '50px', marginTop: -25, fontFamily: 'GillSans',
              fontSize: '16px',
              fontWeight: 600,
              fontWretch: 'normal',
              fontStyle: 'normal',
              lineHeight: 1,
              letterSpacing: 'normal',
              textAlign: 'center',
              color: '#ff3300'
            } : { width: '50px' }, label: '10-15 min.'
          },
          2: {
            style: value === 2 ? {
              width: '50px', marginTop: -25, fontFamily: 'GillSans',
              fontSize: '16px',
              fontWeight: 600,
              fontWretch: 'normal',
              fontStyle: 'normal',
              lineHeight: 1,
              letterSpacing: 'normal',
              textAlign: 'center',
              color: '#ff3300'
            } : { width: '50px' }, label: '15-20 min.'
          },
          3: {
            style: value === 3 ? {
              width: '50px', marginTop: -25, fontFamily: 'GillSans',
              fontSize: '16px',
              fontWeight: 600,
              fontWretch: 'normal',
              fontStyle: 'normal',
              lineHeight: 1,
              letterSpacing: 'normal',
              textAlign: 'center',
              color: '#ff3300'
            } : { width: '50px' }, label: '20-25 min.'
          },
          4: {
            style: value === 4 ? {
              width: '50px', marginTop: -25, fontFamily: 'GillSans',
              fontSize: '16px',
              fontWeight: 600,
              fontWretch: 'normal',
              fontStyle: 'normal',
              lineHeight: 1,
              letterSpacing: 'normal',
              textAlign: 'center',
              color: '#ff3300'
            } : { width: '50px' }, label: '25-30 min.'
          },
          5: {
            style: value === 5 ? {
              width: '50px', marginTop: -25, fontFamily: 'GillSans',
              fontSize: '16px',
              fontWeight: 600,
              fontWretch: 'normal',
              fontStyle: 'normal',
              lineHeight: 1,
              letterSpacing: 'normal',
              textAlign: 'center',
              color: '#ff3300'
            } : { width: '50px' }, label: '30-35 min.'
          }
        }} step={null}
        trackStyle={{ backgroundColor: 'white', height: 0 }}
        railStyle={{ backgroundColor: 'white', height: 0, borderTop: '2px dashed #b0b0b0' }}
        handleStyle={{
          width: 60,
          height: 60,
          boxShadow: '0 0 4px 1px rgba(0, 0, 0, 0.2)',
          border: 'solid 1px #b0b0b0',
          backgroundColor: 'white',
          marginTop: -30
        }}
        dotStyle={{
          border: 0, borderRadius: 0, borderLeft: '1px solid #b0b0b0',
          height: '20px', margin: 0, marginBottom: '-5px', width: '1px'
        }}
      />
    </div>
  )
};

export default SliderFunc;

Answer 1

需要添加的值：

pointerEvents: 'none'

每个标记样式处于活动状态时。

示例：

1: {
            style: value === 1 ? {
              width: '50px', marginTop: -25, fontFamily: 'GillSans',
              fontSize: '16px',
              fontWeight: 600,
              fontWretch: 'normal',
              fontStyle: 'normal',
              lineHeight: 1,
              letterSpacing: 'normal',
              textAlign: 'center',
              color: '#ff3300',
              pointerEvents: 'none'
            } : { width: '50px' }, label: '10-15 min.'
          }

React RC-Slider Grab 与标签上的指针

React RC-Slider Grab vs Pointer on Label

css

slider

reactjs

rc-slider