en-US

Reverse via dReverse.

zh-CN

通过 dReverse 反置。

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 [value3, setValue3] = useState(10);
  const [value4, setValue4] = useState(10);
  const [value5, setValue5] = useState(10);

  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} dReverse onModelChange={setValue1}></DSlider>
      <br />
      <DSlider dModel={value2} dRange dRangeThumbDraggable dReverse onModelChange={setValue2}></DSlider>
      <br />
      <DSlider dModel={value3} dMarks={marks} dReverse onModelChange={setValue3}></DSlider>
      <br />
      <div style={{ display: 'flex', gap: '0 20px', height: 300 }}>
        <DSlider dModel={value4} dVertical dReverse onModelChange={setValue4}></DSlider>
        <DSlider dModel={value5} dMarks={marks} dVertical dReverse onModelChange={setValue5}></DSlider>
      </div>
    </>
  );
}