en-US

Tooltip are controlled via dCustomTooltip and dTooltipVisible.

zh-CN

通过 dCustomTooltip 和 dTooltipVisible 来控制提示。

import { useState } from 'react';

import { DSlider } from '@react-devui/ui';

export default function Demo() {
  const [value1, setValue1] = useState(40);
  const [value2, setValue2] = useState([20, 40]);
  const customTooltip = (value) => `${value}%`;

  return (
    <>
      <DSlider dModel={value1} dCustomTooltip={customTooltip} dTooltipVisible={true} onModelChange={setValue1}></DSlider>
      <br />
      <DSlider
        dModel={value2}
        dCustomTooltip={customTooltip}
        dTooltipVisible={[undefined, false]}
        dRange
        onModelChange={setValue2}
      ></DSlider>
      <br />
    </>
  );
}