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

这篇简洁实用的文章向您展示了如何在 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 中使用范围滑块:教程和示例

编码

  1. 初始化一个新的 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;
  1. 不要忘记 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 步中找到所有这些内容。

步骤:

  1. 创建一个新的基于 TypeScript 的 React 项目:
npx create-react-app kindacode-ts-range-sliders --template typescript
  1. 这是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;
}

结论

你已经学习了如何在 React 中实现和自定义范围滑块。这个元素在现代网络和移动应用程序中变得越来越流行,因为它给用户带来了方便和直观。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 在 React 中使用范围滑块:教程和示例