en-US

Mark segment values via dMarks.

zh-CN

通过 dMarks 标注分段值。

import { useState } from 'react';

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

export default function Demo() {
  const [value1, setValue1] = useState(40);
  const [value2, setValue2] = useState([20, 60]);
  const [value3, setValue3] = useState(10);
  const [value4, setValue4] = useState(10);
  const [value5, setValue5] = useState(0);

  const marks = [
    { value: 0, label: '0°C' },
    { value: 26, label: '26°C' },
    { value: 38, label: '38°C' },
    { value: 100, label: <span style={{ color: 'var(--rd-color-danger)' }}>100°C</span> },
  ];

  return (
    <>
      <DSlider dModel={value1} dMarks={10} onModelChange={setValue1}></DSlider>
      <br />
      <DSlider dModel={value2} dMarks={10} dRange onModelChange={setValue2}></DSlider>
      <br />
      <DSlider dModel={value3} dMarks={marks} onModelChange={setValue3}></DSlider>
      <br />
      <h5 className="title">dStep=10</h5>
      <DSlider dModel={value4} dMarks={marks} dStep={10} onModelChange={setValue4}></DSlider>
      <br />
      <h5 className="title">dStep=null</h5>
      <DSlider dModel={value5} dMarks={marks} dStep={null} onModelChange={setValue5}></DSlider>
    </>
  );
}

.title {
  margin: 20px 0 8px;
}