在 React JS 中创建一个 Airbnb 变阻器滑块

在本文中，我们将了解如何创建 Airbnb 变阻器。变阻器是一个使用 React 构建的 www、移动和可访问的滑块组件。变阻器是一个滚动条，您可以在其中滑动指针以选择一些值或确定一个值范围。

示例

首先创建一个 React 项目 -

npx create-react-app tutorialpurpose

转到项目目录 -

cd tutorialpurpose

下载并安装变阻器包 -

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 值并检查相应的输出。

输出结果

在执行时，它将产生以下输出 -

<video "="" controls="" xx_src="https://www.nhooo.com/assets/questions/media/57024/875062-1632895913.mp4">您的浏览器不支持 HTML5 视频。