モケラ

Tech Sheets

mokelab

MUI の Slider コンポーネント

最終更新日:2024-08-03

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 :スライダーの値が変更されたときに呼び出される関数を設定します

一覧に戻る