sanManjiro
@sanManjiro

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

У меня есть компонент слайдера, где я использую библиотеку 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;


6693a8fb96f2e883934203.png
  • Вопрос задан
  • 80 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
использую библиотеку rc-slider, к сожалению она не предлагает возможности...

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы