en-US

Enable range selection via dRange.

zh-CN

通过 dRange 开启范围选择。

import { useState } from 'react';

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

export default function Demo() {
  const [value1, setValue1] = useState([20, 40]);
  const [value2, setValue2] = useState([20, 40]);
  const [value3, setValue3] = useState([20, 40]);

  return (
    <>
      <DSlider dModel={value1} dRange onModelChange={setValue1}></DSlider>
      <br />
      <DSlider dModel={[20, 40]} dRange dDisabled></DSlider>
      <br />
      <h5 className="title">dRangeMinDistance=10</h5>
      <DSlider dModel={value2} dRange dRangeMinDistance={10} onModelChange={setValue2}></DSlider>
      <br />
      <h5 className="title">dRangeThumbDraggable=true</h5>
      <DSlider dModel={value3} dRange dRangeThumbDraggable onModelChange={setValue3}></DSlider>
    </>
  );
}

.title {
  margin: 8px 0;
}