在 React 中使用 Material UI 的范围滑块

在 React 中使用 Material UI 的范围滑块可以方便地实现一个范围滑动条，用户可以通过鼠标或手势来选择一个范围并应用于应用程序中的任何需要的地方，这极大地提高了用户的体验。

安装

首先，你需要在你的React项目中安装Material UI库：

npm install @material-ui/core

使用

首先，你需要将范围滑块导入你的React项目中：

import React, { useState } from 'react';
import Slider from '@material-ui/core/Slider';

然后，创建一个继承自React.Component的组件并初始化一个范围滑块：

class RangeSlider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: [20, 50],
    };
  }

  handleChange = (event, newValue) => {
    this.setState({ value: newValue });
  };

  render() {
    return (
      <div>
        <Slider
          value={this.state.value}
          onChange={this.handleChange}
          valueLabelDisplay="auto"
          aria-labelledby="range-slider"
          min={0}
          max={100}
        />
      </div>
    );
  }
}

export default RangeSlider;

在上面的代码中，我们创建了一个名为RangeSlider的组件来实现滑块功能。我们设置了一个范围值为20到50，并且添加了一个handleChange方法来处理范围滑块的变化。我们将这些值存储在我们的组件状态中并将其呈现到屏幕上。

配置

在上面的代码片段中，我们设置了valueLabelDisplay来为我们的范围值添加标签，并设置了aria-labelledby来指定控件的标签。

此外，我们通过设置min和max属性来指定可拖动滑块的最小值和最大值。

可自定义的样式

在Material UI中，您可以通过样式对象来自定义范围滑块的外观和感觉。例如，您可以使用以下代码对颜色进行自定义：

const styles = {
  root: {
    color: '#52af77',
    height: 2,
  },
  track: {
    height: 2,
  },
  rail: {
    height: 2,
  },
  thumb: {
    width: 20,
    height: 20,
    backgroundColor: '#fff',
    border: '2px solid currentColor',
    marginTop: -9,
    marginLeft: -11,
    '&:focus, &:hover, &$active': {
      boxShadow: 'inherit',
    },
  },
  active: {},
  valueLabel: {
    left: 'calc(-50% + 4px)',
  },
  markLabelActive: {
    color: 'inherit',
  },
  markActive: {
    backgroundColor: 'currentColor',
  },
};

您可以将这些样式对象传递给您的滑块控件，如下所示：

<Slider
  value={this.state.value}
  onChange={this.handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="range-slider"
  min={0}
  max={100}
  classes={{
    root: classes.root,
    thumb: classes.thumb,
    active: classes.active,
    valueLabel: classes.valueLabel,
    markActive: classes.markActive,
    markLabelActive: classes.markLabelActive,
  }}
/>

总结

以上便是在React中使用Material UI的范围滑块的介绍。它是一个易于实现并可以提高用户体验的强大工具。通过添加您自己的样式和配置，您可以轻松地自定义和调整它以满足您的需求。