資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Material UI 中使用 Slider 元件？
滑塊是任何應用程式中一個重要的功能，可以提升應用程式的使用者體驗。例如，如果您想允許使用者在 1 到 100 之間選擇任何值，使用滑塊比使用自定義數字輸入欄位更好。
Material UI 提供了預先設計的 Slider 元件。此外，它還包含 Slider 元件的不同變體。我們可以將 props 傳遞給 Slider 元件來自定義它。
在專案目錄中執行以下命令，以在 React 應用程式中安裝 Material UI。
npm i @mui/material @emotion/react @emotion/style
語法
使用者可以按照以下語法使用 Material UI 的 Slider 元件。
<Slider
defaultValue = {50}
value = {value}
/>
在上面的語法中，我們將 'defaultValue' 和 'value' props 傳遞給了 Slider 元件。
示例 1（基本滑塊）
在下面的示例中，我們使用 Material UI 的 Slider 元件建立了一個基本滑塊。我們傳遞了 'Size' 和 'defaultValue' 作為 props。此外，每當使用者更改滑塊的值時，我們都會呼叫 handleRangeSlider() 函式，以在滑塊元件中顯示選定的值。
import React, { useState } from "react";
import Slider from "@mui/material/Slider";
const App = () => {
const [value, setValue] = useState(50);
function handleRangeSlider(event, value) {
setValue(value);
}
return (
<div>
<h3>
{" "}
Using the <i> Slider </i> Component of the Material UI to create a basic slider. {" "}
</h3>
<div style = {{ width: "300px" }}>
<Slider
size = "small"
defaultValue = {50}
valueLabelDisplay = "auto"
value = {value}
onChange = {handleRangeSlider}
/>
</div>
<h4> You have selected {value} in range slider </h4>
</div>
);
};
export default App;
輸出
示例 2（帶步長的滑塊）
在下面的示例中，我們使用 Material UI 的 Slider 元件建立了一個帶步長的滑塊。滑塊的最小值為 5，最大值為 50。使用者只能在滑塊中選擇 5 的倍數，因為我們使用了 5 作為 steps prop 的值。
import React, { useState } from "react";
import Slider from "@mui/material/Slider";
const App = () => {
const [value, setValue] = useState(50);
function handleRangeSlider(value) {
setValue(value);
}
return (
<div>
<h3>
{" "}
Using the <i> Slider </i> Component of the Material UI to create a slider with custom steps. {" "}
</h3>
<div style = {{ width: "300px" }}>
<Slider
aria-label = "discrete slider."
defaultValue = {30}
getAriaValueText = {handleRangeSlider}
valueLabelDisplay = "auto"
step = {5}
marks
min = {5}
max = {50}
/>
</div>
<h4> You have selected {value} in range slider </h4>
</div>
);
};
export default App;
輸出
在輸出中，使用者可以觀察到，每當他們更改滑塊的值時，標籤中都會顯示選定的值。
示例 3（範圍滑塊）
在下面的示例中，我們使用 Slider 元件建立了一個範圍滑塊。範圍滑塊允許使用者選擇任何特定範圍。我們用長度為 2 的陣列初始化了 'range' 變數。每當使用者更改範圍時，我們都會執行 handleRangeSlider() 函式並在 'range' 變數中設定新範圍。
import React, { useState } from "react";
import Slider from "@mui/material/Slider";
const App = () => {
const [range, setRange] = useState([15, 65]);
function handleRangeSlider(e, range) {
setRange(range);
}
return (
<div>
<h3>
{" "}
Using the <i> Slider </i> Component of the Material UI to create a Range slider with custom steps {" "}
</h3>
<div style = {{ width: "300px" }}>
<Slider
getAriaLabel = {() => "Select Range"}
value = {range}
onChange = {handleRangeSlider}
valueLabelDisplay = "auto"
getAriaValueText = {() => {
return `${range}`;
}}
/>
</div>
<h4>
{" "}
You have selected {range[0]}, {range[1]} in range slider. {" "}
</h4>
</div>
);
};
export default App;
輸出
此外，我們透過訪問 range 陣列在輸出中顯示範圍值。
示例 4（自定義步長）
在下面的示例中，我們在 Slider 元件中添加了自定義標記。例如，如果我們想允許使用者僅選擇某些值，則應將標記與 Slider 元件一起使用。
我們在 2、4、8、16、32 和 64 處設定了標記。因此，使用者只能在滑塊上選擇這些值。我們為標記建立了一個物件陣列，並將該陣列作為 Slider 元件的 prop 傳遞。
import React, { useState } from "react";
import Slider from "@mui/material/Slider";
const App = () => {
const [value, setValue] = useState(64);
const marks = [
{
value: 2,
label: "2",
},
{
value: 4,
label: "4",
},
{
value: 8,
label: "8",
},
{
value: 16,
label: "16",
},
{
value: 32,
label: "32",
},
{
value: 64,
label: "64",
},
];
function handleSlider(e, value) {
setValue(value);
}
return (
<div>
<h3>
{" "}
Using the <i> Slider </i> Component of the Material UI to create a Range slider with custom steps. {" "}
</h3>
<div style = {{ width: "300px" }}>
<Slider
aria-label = "Custom steps in the slider."
defaultValue = {64}
onChange = {handleSlider}
valueLabelDisplay = "auto"
step = {null}
getAriaValueText = {() => {
return `${value}`;
}}
marks = {marks}
/>
</div>
<h4> You have selected {value} in the slider. </h4>
</div>
);
};
export default App;
輸出
在本教程中，我們學習瞭如何在 React 應用程式中使用 Material UI 庫的 Slider 元件。我們透過不同的示例瞭解了 Slider 元件的不同變體。
第一個示例演示了滑塊元件的基本用法。在第二個示例中，我們在滑塊中添加了步長。在第三個示例中，我們建立了範圍滑塊；在最後一個示例中，我們在滑塊元件中添加了自定義標記。
2K+ 瀏覽量
