数据结构
网络
关系型数据库管理系统
操作系统
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 次浏览
广告