MUI の Slider は、ユーザーが範囲内の値を選択できるのコンポーネントです。 数値入力の代替としてよく使用され、直感的に値を選択することができます。

公式ドキュメント：Slider

基本的な使い方

import * as React from "react";
import Box from "@mui/material/Box";
import Slider from "@mui/material/Slider";

export default function BasicSlider() {
  const [value, setValue] = React.useState<number>(30);
      // value：スライダーの現在の値を保持するための状態です。初期値は30に設定されています
      // setValue： 状態を更新するための関数です

  const handleChange = (event: Event, newValue: number | number[]) => { // スライダーの値が変更されたときに呼び出される関数です
    setValue(newValue as number);
  };

  return (
    <Box sx={{ width: 200 }}> // 幅を200ピクセルに設定しています
      <Slider aria-label="Volume" value={value} onChange={handleChange} /> // Sliderコンポーネントです
    </Box>
  );
}

コンポーネント

• aria-label ：アクセシビリティのために使用されます
• value ：スライダーの現在の値を設定します
• onChange ：スライダーの値が変更されたときに呼び出される関数を設定します