#Slider 滑动输入条

import { Slider, type SliderMark } from '@sudden3/leaf-ui';
import { useState } from 'react';

const marks: SliderMark[] = [
  { value: 0, label: '低' },
  { value: 50, label: '中' },
  { value: 100, label: '高' },
];
export function SliderBasic() {
  const [value, setValue] = useState(35);
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Slider aria-label="音量" value={value} onChange={setValue} marks={marks} />
      <p className="leaf-demo-note">当前数值：{value}</p>
      <Slider aria-label="预算" range defaultValue={[20, 70]} marks={marks} />
      <Slider aria-label="禁用数值" defaultValue={45} disabled />
      <Slider aria-label="垂直数值" vertical defaultValue={60} />
    </div>
  );
}