資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究在 React JS 中建立 Airbnb 調光滑塊
在本文中，我們將瞭解如何建立一個 Airbnb 調光滑塊。調光滑塊是一個基於 React 構建的 Web、移動和可訪問的滑塊元件。調光滑塊是一個捲軸，您可以滑動指標以選擇一些值或確定一個值的範圍。
示例
首先建立一個 React 專案 -
npx create-react-app tutorialpurpose
轉到專案目錄 -
cd tutorialpurpose
下載並安裝 **rheostat** 包 -
npm install rheostat
我們可以使用此包在 React 專案中包含具有預設功能的預製調光滑塊。
在 **App.js** 中插入以下程式碼行 -
import React from "react";
import Rheostat from "rheostat";
import "rheostat/initialize";
import "./App.css";
export default function App() {
const [min, setMin] = React.useState("");
const [max, setMax] = React.useState("");
return (
<>
<Rheostat
min={1}
max={100}
values={[1, 100]}
onValuesUpdated={(e) => {
setMin(e.values[0]);
setMax(e.values[1]);
}}
/>
<div>
<p>Min value:{min}</p>
<p>Max value:{max}</p>
</div>
</>
);
}這裡，引數 **min** 和 **max** 分別表示調光滑塊的最小值和最大值。
這將為您提供滑塊，但實際上它看起來並不好，我們需要新增一些 CSS。因此，我們將使用其文件中提供的預設 CSS。
在 **App.js** 中新增以下程式碼行 -
.DefaultProgressBar__vertical {
width: 24px;
height: 100%;
}
.DefaultProgressBar_progressBar {
background-color: #abc4e8;
position: absolute
}
.DefaultProgressBar_progressBar__vertical {
height: 100%;
width: 24px
}
.DefaultProgressBar_background__vertical {
height: 100%;
top: 0px;
width: 15px
}
.DefaultProgressBar_background__horizontal {
height: 13px;
top: 0px
}
.DefaultHandle_handle {
width: 24px;
height: 24px;
border-width: 1px;
border-style: solid;
border-color: #d8d8d8;
background-color: #fcfcfc;
border-radius: 20%;
outline: none;
z-index: 2;
box-shadow: 0 2px 2px #181616
}
.DefaultHandle_handle:focus {
box-shadow: #abc4e8 0 0 1px 1px
}
.DefaultHandle_handle:after {
content: "";
display: block;
position: absolute;
background-color: #1f2124
}
.DefaultHandle_handle:before {
content: "";
display: block;
position: absolute;
background-color: #1f2124
}
.DefaultHandle_handle__horizontal {
margin-left: -12px;
top: -5px
}
.DefaultHandle_handle__horizontal:before {
top: 7px;
height: 10px;
width: 1px;
left: 10px
}
.DefaultHandle_handle__horizontal:after {
top: 7px;
height: 10px;
width: 1px;
left: 13px
}
.DefaultHandle_handle__disabled {
border-color: #dbdbdb
}
.DefaultBackground {
background-color: #353434;
height: 15px;
width: 100%;
border: 1px solid #d8d8d8;
position: relative
}
.DefaultBackground_background__horizontal {
height: 15px;
top: -2px;
left: -2px;
bottom: 4px;
width: 100%
}
.DefaultBackground_background__vertical {
width: 15px;
top: 0px;
height: 100%
}
.rheostat {
position: relative;
overflow: visible;
margin-top: 100px;
}
@media (min-width: 1128px) {
.autoAdjustVerticalPosition {
top: 12px
}
}
.rheostat__vertical {
height: 100%
}
.handleContainer {
height: 15px;
top: -2px;
left: -2px;
bottom: 4px;
width: 100%;
position: absolute
}
.rheostat_background {
background-color: #fcfcfc;
border: 1px solid #d8d8d8;
position: relative
}
.rheostat_background__horizontal {
height: 15px;
top: -2px;
left: -2px;
bottom: 4px;
width: 100%
}
.rheostat_background__vertical {
width: 15px;
top: 0px;
height: 100%
}這是整個 CSS，它將定義調光滑塊所有其他元件的樣式。
從 Chrome 控制檯檢查元素名稱，並嘗試更改一些 CSS 值並檢查相應的輸出。
輸出
執行後，將產生以下輸出 -
更新於: 2021年9月29日
810 次瀏覽
廣告