Как сделать динамический текст над слайдером?

Question

[San Manjiro]

У меня есть компонент слайдера, где я использую библиотеку rc-slider, к сожалению она не предлагает возможности отображения текста непосредственно над самой точкой слайдера. Я хочу добиться того, чтобы мое текущее значение value следовало за точкой на слайдере, как это можно сделать?

// # CLIENT COMPONENT
"use client";

// # REACT
import React, { useState } from "react";

// # LIBRARY
import Slider from "rc-slider";
import Tooltip from "rc-tooltip";

// # STYLE
import "rc-slider/assets/index.css";
import "rc-tooltip/assets/bootstrap.css";
import { text } from "node:stream/consumers";

// ^ COMPONENT VISION SLIDER
const CSlider: React.FC = () => {
  const [value, setValue] = useState<number | number[]>();

  return (
    <div style={{ width: 400, margin: 50 }}>
      <Slider
        min={1000}
        max={100000}
        step={1000}
        onChange={(e) => {
          setValue(e);
        }}
      />
    </div>
  );
};

export default CSlider;

Answer 1

[0xD34F]

использую библиотеку rc-slider, к сожалению она не предлагает возможности...

А если изучить документацию повнимательнее? Есть пример с выводом значения в тултипе при перетаскивании, сделать тултип постоянно видимым не проблема.

Comments

[San Manjiro]

И правда, в документации есть упоминание об этом с примерами, мне понадобилось для этого создать отдельный компонент TooltipSlider.tsx, немного его отредактировать и изменить немного вид отображения. Теперь мой код выглядит так:
TooltipSlider.tsx

import type { SliderProps } from "rc-slider";
import Slider from "rc-slider";
import type { TooltipRef } from "rc-tooltip";
import Tooltip from "rc-tooltip";
import "rc-tooltip/assets/bootstrap.css";
import raf from "rc-util/lib/raf";
import * as React from "react";

interface HandleTooltipProps {
  value: number;
  children: React.ReactElement;
  visible?: boolean;
  tipFormatter?: (value: number) => React.ReactNode;
}

const HandleTooltip: React.FC<HandleTooltipProps> = (props) => {
  const {
    value,
    children,
    visible = true,
    tipFormatter = (val) => `${val}`,
    ...restProps
  } = props;

  const tooltipRef = React.useRef<TooltipRef | null>(null);
  const rafRef = React.useRef<number | null>(null);
  const [isClient, setIsClient] = React.useState(false);

  React.useEffect(() => {
    setIsClient(true);
  }, []);

  function cancelKeepAlign() {
    if (rafRef.current !== null) {
      raf.cancel(rafRef.current);
    }
  }

  function keepAlign() {
    rafRef.current = raf(() => {
      if (tooltipRef.current) {
        tooltipRef.current.forceAlign();
      }
    });
  }

  React.useEffect(() => {
    if (visible) {
      keepAlign();
    } else {
      cancelKeepAlign();
    }

    return cancelKeepAlign;
  }, [value, visible]);

  if (!isClient) {
    return children;
  }

  return (
    <Tooltip
      placement="top"
      overlay={tipFormatter(value)}
      overlayInnerStyle={{ minHeight: "auto" }}
      ref={tooltipRef}
      visible={visible}
      {...restProps}
    >
      {children}
    </Tooltip>
  );
};

export const handleRender: SliderProps["handleRender"] = (node, props) => (
  <HandleTooltip value={props.value}>{node}</HandleTooltip>
);

interface TooltipSliderProps extends SliderProps {
  tipFormatter?: (value: number) => React.ReactNode;
  tipProps?: any;
}

const TooltipSlider: React.FC<TooltipSliderProps> = ({
  tipFormatter,
  tipProps,
  ...props
}) => {
  const tipHandleRender: SliderProps["handleRender"] = (node, handleProps) => (
    <HandleTooltip
      value={handleProps.value}
      tipFormatter={tipFormatter}
      {...tipProps}
    >
      {node}
    </HandleTooltip>
  );

  return <Slider {...props} handleRender={tipHandleRender} />;
};

export default TooltipSlider;

Slider.tsx

// # CLIENT COMPONENT
"use client";

// # REACT
import React, { useState } from "react";

// # LIBRARY
import TooltipSlider, { handleRender } from "./TooltipSlider";

// # STYLE
import "rc-slider/assets/index.css";
import "rc-tooltip/assets/bootstrap.css";

// ^ COMPONENT VISION SLIDER
const CSlider: React.FC = () => {
  const [value, setValue] = useState<number | number[]>();

  return (
    <div style={{ width: 400, margin: 50 }}>
      <TooltipSlider
        min={1000}
        max={100000}
        step={1000}
        onChange={(e) => {
          setValue(e);
        }}
      />
    </div>
  );
};

export default CSlider;

Спасибо вам за вашу внимательность )