使用 React JS 创建 Airbnb 变阻器滑块

react jsjavascript libraryfront end technology更新于 2025/11/19 9:48:17

在本文中，我们将了解如何创建 Airbnb 变阻器。 Rheostat 是一个使用 React 构建的、支持 www、移动设备且易于访问的滑块组件。Rheostat 是一个滚动条，您可以通过滑动指针来选择某些值或确定值的范围。

示例

首先创建一个 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 值，然后检查相应的输出。