#Adaptive Slider

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { AdaptiveSlider } from "adaptive-material-ui/components/slider";

export default function () {
  return (
    <AdaptiveModeDemo>
      <AdaptiveSlider defaultValue={30} />
    </AdaptiveModeDemo>
  );
}

import AdaptiveModeDemo from "@/shared/adaptiveModeDemo";
import { DemoList, DemoListItem } from "@/shared/demoList";
import { AdaptiveSlider } from "adaptive-material-ui/components/slider";

export default function () {
  return (
    <AdaptiveModeDemo>
      <DemoList>
        <DemoListItem title="Color">
          <AdaptiveSlider color="primary" defaultValue={30} />
          <AdaptiveSlider color="secondary" defaultValue={30} />
          <AdaptiveSlider color="error" defaultValue={30} />
          <AdaptiveSlider color="info" defaultValue={30} />
          <AdaptiveSlider color="success" defaultValue={30} />
          <AdaptiveSlider color="warning" defaultValue={30} />
        </DemoListItem>
        <DemoListItem title="Small">
          <AdaptiveSlider defaultValue={30} size="small" />
        </DemoListItem>
        <DemoListItem title="Discrete">
          <AdaptiveSlider defaultValue={30} marks shiftStep={30} step={10} />
        </DemoListItem>
        <DemoListItem title="Range">
          <AdaptiveSlider
            defaultValue={[30, 50, 70]}
            valueLabelDisplay="auto"
          />
        </DemoListItem>
        <DemoListItem title="Inverted Track">
          <AdaptiveSlider defaultValue={30} track="inverted" />
        </DemoListItem>
        <DemoListItem title="No Track">
          <AdaptiveSlider defaultValue={30} track={false} />
        </DemoListItem>
        <DemoListItem title="Disabled">
          <AdaptiveSlider defaultValue={30} disabled />
        </DemoListItem>
        <DemoListItem title="Vertical">
          <AdaptiveSlider
            defaultValue={30}
            marks
            orientation="vertical"
            shiftStep={30}
            step={10}
            sx={{ height: 200 }}
          />
          <AdaptiveSlider
            defaultValue={[30, 80]}
            orientation="vertical"
            sx={{ height: 200 }}
          />
        </DemoListItem>
      </DemoList>
    </AdaptiveModeDemo>
  );
}