en-US

Set to vertical via dVertical.

zh-CN

通过 dVertical 设置为垂直方向。

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

  return (
    <div style={{ display: 'flex', gap: '0 20px', height: 300 }}>
      <DSlider dModel={value1} dVertical onModelChange={setValue1}></DSlider>
      <DSlider dModel={value2} dRange dRangeThumbDraggable dVertical onModelChange={setValue2}></DSlider>
      <DSlider dModel={value3} dMarks={10} dVertical onModelChange={setValue3}></DSlider>
      <DSlider
        dModel={value4}
        dMarks={[
          { 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> },
        ]}
        dVertical
        onModelChange={setValue4}
      ></DSlider>
    </div>
  );
}