在 React 中使用范围滑块：教程和示例

React 1年前 216

这篇简洁实用的文章向您展示了如何在 React 中实现和自定义范围滑块。一切都将在不使用任何第三方库的情况下从头开始制作。我不会浪费你的时间和无聊的话让你厌烦；让我们开始探索重要的事情。

注意：我们将使用 Javascript 编写代码，然后使用 TypeScript。如果您只对 TypeScript 感兴趣，则可以跳过 Javascript 部分；如果您在工作中不使用它，则可以跳过 TypeScript 部分。

概述

范围滑块是一个控件元素，允许用户从连续的值范围中选择单个值。它可以通过使用 <input type=”range”> 来创建。默认范围是 0 到 100，但是，您可以根据需要设置其他最小值和最大值。

在 JSX 和 React 中使用范围滑块时，您应该关心以下道具：

value : 他当前为滑块选择的值
onChange：当用户通过拖动拇指为滑块选择新值时，在拖动期间调用函数
min：用户可以选择的最小值（默认值为 0）
max：用户可以选择的最大值（默认值为 100）
step : 指定合法的数字间隔
className：用于设置滑块样式的 CSS 类

<input
        type='range'
        onChange={/* your event handler function here */}
        min={1}
        max={400}
        step={1}
        value={/* your state variable here */}
        className='custom-slider'>
</input>

为了更清楚，请参阅下面的完整示例。

完整示例

应用预览

我们要构建的演示使用 2 个范围滑块来实时调整蓝色框的宽度和高度。这 2 个滑块具有不同的外观。第一个具有默认外观，而第二个使用 CSS 进行深度样式设置。

此动画 GIF 屏幕截图将使您易于理解和直观：

在 React 中使用范围滑块：教程和示例

编码

初始化一个新的 React 项目：

npx create-react-app kindacode-range-sliders

您可以选择任何对您有意义的名称。

2. 删除src/App.js中的所有默认代码并添加以下内容：

// KindaCode.com
// src/App.js
import { useState } from 'react';
import './App.css';

function App() {
  // the width of the box
  const [width, setWidth] = useState(100);

  // the height of the box
  const [height, setHeight] = useState(100);

  // This function is called when the first range slider changes
  const changeWidth = (event) => {
    setWidth(event.target.value);
  };

  // This function is called when the second range slider changes
  const changeHeight = (event) => {
    setHeight(event.target.value);
  };

  return (
    <div className='container'>
      <h2>Welcome to KindaCode.com</h2>

      {/* A range slider with default appearance */}
      <h4>Box Width: {width}px</h4>
      <input
        type='range'
        onChange={changeWidth}
        min={1}
        max={800}
        step={1}
        value={width}
      ></input>

      {/* Custom range slider */}
      <h4>Box Height: {height}px</h4>
      <input
        type='range'
        onChange={changeHeight}
        min={1}
        max={400}
        step={1}
        value={height}
        className='custom-slider'
      ></input>

      {/* Render the box */}
      <div
        style={{ width: `${width}px`, height: `${height}px` }}
        className='box'
      ></div>
    </div>
  );
}

export default App;

不要忘记 CSS。在这个例子中非常重要。打开您的src/App.css文件并将自动生成的代码替换为：

/* KindaCode.com */
/* src/App.css */
.container {
  width: 90%;
  margin: 20px auto;
}

/* Style the custom slider */
.custom-slider {
  width: 100%;
  height: 30px;
  background: #eee;
  opacity: 0.8;
  outline: none;
  transition: 0.3s;
  -webkit-appearance: none;
}

.custom-slider:hover {
  opacity: 1;
}

.custom-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  background: #4caf50;
  cursor: pointer;
}

.custom-slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  background: #4caf50;
  cursor: pointer;
}

/* Style the box */
.box {
  margin-top: 50px;
  background: #2196f3;
}

在 TypeScript 中使用范围滑块

重要的是要知道范围滑块的onChange事件的类型是 React.ChangeEvent 。另一点是event.target.value 会给你一个字符串，你必须使用parseInt() 或parseFloat() 函数将其转换为数字。您可以在第 2 步中找到所有这些内容。

步骤：

创建一个新的基于 TypeScript 的 React 项目：

npx create-react-app kindacode-ts-range-sliders --template typescript

这是src/App.tsx的完整源代码：

// KindaCode.com
// src/App.tsx
import { useState } from 'react';
import './App.css';

function App() {
  // the width of the box
  const [width, setWidth] = useState(100);

  // the height of the box
  const [height, setHeight] = useState(100);

  // This function is called when the first range slider changes
  const changeWidth = (event: React.ChangeEvent<HTMLInputElement>) => {
    setWidth(parseInt(event.target.value));
  };

  // This function is called when the second range slider changes
  const changeHeight = (event: React.ChangeEvent<HTMLInputElement>) => {
    setHeight(parseInt(event.target.value));
  };

  return (
    <div className='container'>
      <h2>Welcome to KindaCode.com</h2>

      {/* A range slider with default appearance */}
      <h4>Box Width: {width}px</h4>
      <input
        type='range'
        onChange={changeWidth}
        min={1}
        max={800}
        step={1}
        value={width}
      ></input>

      {/* Custom range slider */}
      <h4>Box Height: {height}px</h4>
      <input
        type='range'
        onChange={changeHeight}
        min={1}
        max={400}
        step={1}
        value={height}
        className='custom-slider'
      ></input>

      {/* Render the box */}
      <div
        style={{ width: `${width}px`, height: `${height}px` }}
        className='box'
      ></div>
    </div>
  );
}

export default App;

3、CSS代码（其实和上一节的App.css文件没有区别）：

/* KindaCode.com */
/* src/App.css */
.container {
  width: 90%;
  margin: 20px auto;
}

/* Style the custom slider */
.custom-slider {
  width: 100%;
  height: 30px;
  background: #eee;
  opacity: 0.8;
  outline: none;
  transition: 0.3s;
  -webkit-appearance: none;
}

.custom-slider:hover {
  opacity: 1;
}

.custom-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  background: #4caf50;
  cursor: pointer;
}

.custom-slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  background: #4caf50;
  cursor: pointer;
}

/* Style the box */
.box {
  margin-top: 50px;
  background: #2196f3;
}