ふかしぎのReactさんぷるず

Sliderの解説 Componet API - MUI v5 API - Reactさんぷるず

最終更新 2022/04/18
MUI v5の各機能の説明です。
対象のMUIのバージョンは v5.5.2 です。
ここでは初心者向けの基本的な説明をしています。

使用するための下準備

お約束です。取り込まないと使えません。
インポートならば
import { Slider } from '@mui/material';
CDNで使いたいのなら<script>でMUIを読み込んだ後に
const Slider  = MaterialUI.Slider;
で使用できるようになります。
CDNでの詳しいやり方はこちらに移動してください。

Sliderの各プロパティの解説

MUIでのSliderの扱い方の説明です。
スライドバーで自由に動かせるあれです。
<input type="range">がかっこよくなります
const Slider = MaterialUI.Slider;
ReactDOM.render(
<div>
  <div>通常の<input type="range">のスライダー</div>
  <input type="range" />
  <div>MUIのスライダー</div>
  <Slider />
</div>
, document.getElementById('sample')
);

aria-label

Sliderのaria-labelの使い方の説明です。
内部で生成される<input type="range">のaria-labelを設定できます。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<Slider aria-label="ラベルです" />
, document.getElementById('sample')
);

aria-labelledby

Sliderのaria-labelledbyの使い方の説明です。
内部で生成される<input type="range">のaria-labelledbyを設定できます。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<Slider aria-labelledby="ラベルバイです" />
, document.getElementById('sample')
);

aria-valuetext

Sliderのaria-valuetextの使い方の説明です。
内部で生成される<input type="range">のaria-valuetextを設定できます。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<Slider aria-valuetext="バリューテキストです" />
, document.getElementById('sample')
);

classes

Sliderのclassesの使い方の説明です。
CSSの設定を上書きします。

color

Sliderのcolorの使い方の説明です。
スライダーの色を設定できます。
テーマの色を指定します。
使えるのはprimary、secondary、error、info、success、warning、そして自分で設定した色です。
未設定のデフォルトはprimaryです。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<div>
  <Slider color="primary" />
  <Slider color="secondary" />
  <Slider color="error" />
  <Slider color="info" />
  <Slider color="success" />
  <Slider color="warning" />
</div>
, document.getElementById('sample')
);

components

Sliderのcomponentsの使い方の説明です。
省略

componentsProps

SliderのcomponentsPropsの使い方の説明です。
省略

defaultValue

SliderのdefaultValueの使い方の説明です。
管理されない初期値を設定できます。
数値を設定します。
defaultValue="10"のように数値ではなく文字列を指定した場合はエラーになります。
TypeError: Cannot read properties of undefined (reading 'setExtraStackFrame') at setCurrentlyValidatingElement
のように怒られます。
サンプルでは最初から10の位置にスライドされています。
管理されていないのでユーザー側で値が変更できます。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<Slider defaultValue={10} />
, document.getElementById('sample')
);

disabled

Sliderのdisabledの使い方の説明です。
スライダーを使用不可にします。
使用不可になると薄い灰色になります。
ブール値を設定します。trueにすると変更できなくなります。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<Slider disabled={true} />
, document.getElementById('sample')
);

disableSwap

SliderのdisableSwapの使い方の説明です。
スライダーの●の上にマウスを移動させたときに数値のポップアップをするかの設定です。
ブール値を設定します。trueにするとポップアップしなくなります。
サンプルは上段をtrueにしているのでマウスを●の上に移動させても数値のポップアップがありません。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<div>
<Slider disableSwap={true} valueLabelDisplay="auto"/>
<Slider disableSwap={false} valueLabelDisplay="auto"/>
</div>
, document.getElementById('sample')
);

getAriaLabel

SliderのgetAriaLabelの使い方の説明です。
省略
スクリーンリーダー用です。

getAriaValueText

SliderのgetAriaValueTextの使い方の説明です。
省略
スクリーンリーダー用です。

isRtl

SliderのisRtlの使い方の説明です。
省略
文字の方向ですが日本語はltrなので設定の必要なし

marks

Sliderのmarksの使い方の説明です。
スライダーの目盛りを設定します。
ブール値か配列を設定します。
他をなにも設定せずにtrueにすると全ての数字の目盛りが付きます。
未設定のデフォルトはfalseです。
配列はlabelとvalueをセットで繰り返します。{"label":"十","value":10}
labelはスライダーの下部に表示されます。valueは表示したい位置の数値です。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<div>
  <Slider marks={true} valueLabelDisplay="auto" />
  <Slider marks={[{"label":"十","value":10},{"label":"二十","value":20},{"label":"五十","value":50}]} valueLabelDisplay="auto" />
  <Slider marks={false} valueLabelDisplay="auto" />
</div>
, document.getElementById('sample')
);

max

Sliderのmaxの使い方の説明です。
スライダーの右端の最大値を設定します。
数値で設定します。
未設定のデフォルトは100です。
サンプルは最大5を設定したため、0、1、2、3、4、5の6か所しか選べません。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<Slider max={5} valueLabelDisplay="auto" />
, document.getElementById('sample')
);

min

Sliderのminの使い方の説明です。
スライダーの左端の最小値を設定します。
数値で設定します。
未設定のデフォルトは0です。
サンプルは最小98を設定したため、98、99、100の3か所しか選べません。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<Slider min={98} valueLabelDisplay="auto" />
, document.getElementById('sample')
);

name

Sliderのnameの使い方の説明です。
内部で生成される<input type="range">のnameを設定できます。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<Slider name="名前です" />
, document.getElementById('sample')
);

onChange

SliderのonChangeの使い方の説明です。
INPUT要素のonChangeと同じです。
値が変更されたときに実行されます。
event.target.valueで値を取得できます。
この処理がされた後にスライダーの表示が変更されます。
サンプルではアラートウインドを出し値を表示します
const Slider = MaterialUI.Slider;
ReactDOM.render(
<Slider onChange={(event)=>{alert('変更されました。値は'+event.target.value)}} />
, document.getElementById('sample')
);

onChangeCommitted

SliderのonChangeCommittedの使い方の説明です。
INPUT要素のonChangeと同じです。
マウスのクリックが終了した(マウスのボタンから指が離れた)ときに実行されます。
valueで値を取得できます。
このスライダーの表示が変更された後に実行されます。
サンプルではアラートウインドを出し値を表示します
const Slider = MaterialUI.Slider;
ReactDOM.render(
<Slider onChangeCommitted={(event,value)=>{alert('クリック終了。値は'+value)}} />
, document.getElementById('sample')
);

orientation

Sliderのorientationの使い方の説明です。
スライダーの表示を縦にするか横にするかの設定です。
horizontalかverticalのどちらかを設定できます。
未設定のデフォルトはhorizontalで横向きです。
verticalで縦向きにする場合は高さのCSSを設定しないと最初の高さでただの●のみになります。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<div>
  <div style={{"height":"100px"}}>
    <Slider  orientation="vertical" />
  </div>
  <Slider  orientation="horizontal" />
  <div>高さ未設定でただの●</div>
  <Slider  orientation="vertical" />
</div>
, document.getElementById('sample')
);

scale

Sliderのscaleの使い方の説明です。
ポップアップの内容を変更します。
内部の数値は変わっていません。
この変更は内部で生成されるINPUT要素のaria-valuenow属性にも設定されます。
この変更は内部で生成されるINPUT要素のaria-valuetext属性にも設定されます。
サンプルの1つ目は0.1を加えた数字を表示します。
サンプルの2つめは"数値は"を先頭に付け加えて表示します。そして数値の内容をアラートウインドウで表示します。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<div>
  <Slider scale={(x)=>x+0.1} valueLabelDisplay="on" />
  <Slider scale={(x)=>"数値は"+x} valueLabelDisplay="on" onChangeCommitted={(event,value)=>{alert('クリック終了。値は'+value)}} />
</div>
, document.getElementById('sample')
);

size

Sliderのsizeの使い方の説明です。
スライダーのサイズを設定します。
設定できるのはsmall、medium、もしくは定義した文字列です。
未設定のデフォルトはmediumです。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<div>
  <Slider size="small" />
  <Slider size="medium" />
</div>
, document.getElementById('sample')
);

step

Sliderのstepの使い方の説明です。
メモリの飛ばす単位です。
数値を設定します。
step="10"のように数値ではなく文字列を指定した場合はエラーになります。
react-dom.production.min.js:141 TypeError: Cannot read properties of undefined (reading 'setExtraStackFrame') at setCurrentlyValidatingElement
のように怒られます。
サンプルの1つ目は5刻みでスライダーを動かせます。0、5、10、15、20・・・
サンプルの2つ目は20刻みでスライダーを動かせます。0、20、40、60・・・
const Slider = MaterialUI.Slider;
ReactDOM.render(
<div>
  <Slider step={5} valueLabelDisplay="auto" />
  <Slider step={20} valueLabelDisplay="auto" />
</div>
, document.getElementById('sample')
);
maxとminの差の数値を割り切れる数を設定したほうがよいでしょう。
min7でmax56なら56-7=49で49を割り切れる数値の7です。
割り切れない数を設定すると挙動がおかしくなります。
下のサンプルは2つ目、3つ目が割り切れないのでスライダーの右端の56の位置をクリックしても移動できません。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<div>
  <Slider min={7} max={56} step={7} valueLabelDisplay="auto" />
  <Slider min={7} max={56} step={14} valueLabelDisplay="auto" />
  <Slider min={7} max={56} step={20} valueLabelDisplay="auto" />
</div>
, document.getElementById('sample')
);

sx

Sliderのsxの使い方の説明です。
他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。

tabIndex

SliderのtabIndexの使い方の説明です。
内部で生成される<input type="range">のtabIndexを設定できます。
サンプルはtabindexを1に設定しているのでこのページを表示した直後にタブキーを押すとここに移動します。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<Slider tabIndex={1} />
, document.getElementById('sample')
);

track

Sliderのtrackの使い方の説明です。
スライダーの線の太さを設定します。
inverted、normal、そしてブール値のfalseを設定できます。
invertedは選んだ範囲が薄くなり、未選択範囲が濃くなります。
normalはは選んだ範囲が濃くなり、未選択範囲が薄くなります。
falseは選択関係なく常に薄い状態です。
未設定のデフォルトはnormalです。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<div>
  <Slider track="inverted" />
  <Slider track="normal" />
  <Slider track={false} />
</div>
, document.getElementById('sample')
);

value

Sliderのvalueの使い方の説明です。
管理された値を設定します。
defaultValueと違い管理されているのでユーザー側から変更できません。
数値を設定します。
value="30"のように数値ではなく文字列を指定した場合はエラーになります。
サンプルは30に設定されていますがマウスで他の値に変更しようとしてもできません。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<Slider value={30} />
, document.getElementById('sample')
);

valueLabelDisplay

SliderのvalueLabelDisplayの使い方の説明です。
スライダーの●の上にポップアップをするかの設定です。
文字列でon、off、autoを設定できます。
onは常に表示しています。
offは常に非表示です。
autoはマウスが●の上にあるときだけポップアップします。
未設定のデフォルトはoffです
const Slider = MaterialUI.Slider;
ReactDOM.render(
<div>
  <Slider valueLabelDisplay="on" />
  <Slider valueLabelDisplay="off" />
  <Slider valueLabelDisplay="auto" />
</div>
, document.getElementById('sample')
);

valueLabelFormat

SliderのvalueLabelFormatの使い方の説明です。
ポップアップの内容を変更します。
内部の数値は変わっていません。
scaleとの違いはスケールは生成されるINPUT要素のaria-valuenow属性とaria-valuetext属性にも設定されますがvalueLabelFormatはされません。
valueLabelFormatはscaleが実行された後にさらに実行されます。
サンプルの1つ目は0.1を加えた数字を表示します。
サンプルの2つめは"数値は"を先頭に付け加えて表示します。そして数値の内容をアラートウインドウで表示します。
サンプルの3つ目はscaleが実行されたときに”scale実行。値は『xxx』”を設定し、valueLabelFormatが実行されたときに”valueLabelFormat実行。値は「xxx」”が設定されます。valueLabelFormatの中にscaleがあることがわかります。
const Slider = MaterialUI.Slider;
ReactDOM.render(
<div>
  <Slider valueLabelFormat={x=>x+0.1}  valueLabelDisplay="on" onChangeCommitted={(event,value)=>{alert('クリック終了。【'+value+'】')}} defaultValue={90} />
  <Slider valueLabelFormat={x=>"値は"+x}  valueLabelDisplay="on" onChangeCommitted={(event,value)=>{alert('クリック終了。【'+value+'】')}}  />
  <Slider
   valueLabelFormat={x=>"valueLabelFormat実行。値は「"+x+"」"}
   scale={(x)=>"scale実行。値は『"+x+"』"}
   valueLabelDisplay="on" min={0} max={2} onChangeCommitted={(event,value)=>{alert('クリック終了。【'+value+'】')}} defaultValue={1} />
</div>
, document.getElementById('sample')
);
menu

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次