如何在react-input-range中添加自定义箭头

在react-input-range中添加自定义箭头，可以通过自定义CSS样式来实现。以下是一种可能的实现方式：

首先，确保你已经安装了react-input-range库，并在你的项目中引入它。
创建一个新的CSS文件，比如"custom-input-range.css"，并在你的React组件中引入它。
在CSS文件中，使用伪元素(::before和::after)来创建自定义箭头。你可以使用CSS属性来调整箭头的样式，比如颜色、大小、形状等。

/* custom-input-range.css */

/* 自定义箭头样式 */
.input-range .input-range__slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #000; /* 自定义箭头颜色 */
  transform: translateY(-50%);
}

.input-range .input-range__slider::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #000; /* 自定义箭头颜色 */
  transform: translateY(-50%);
}

/* 调整箭头大小 */
.input-range .input-range__slider::before,
.input-range .input-range__slider::after {
  width: 10px;
  height: 10px;
}

/* 调整箭头位置 */
.input-range .input-range__slider {
  margin-top: -5px;
}

在你的React组件中，使用自定义的CSS类名来应用这些样式。

import React from "react";
import InputRange from "react-input-range";
import "react-input-range/lib/css/index.css";
import "./custom-input-range.css"; // 引入自定义的CSS文件

const CustomInputRange = () => {
  return (
    <InputRange
      minValue={0}
      maxValue={100}
      formatLabel={(value) => `${value}%`}
      classNames={{
        slider: "input-range__slider", // 使用自定义的CSS类名
        labelContainer: "input-range__label-container",
        activeTrack: "input-range__track input-range__track--active",
        disabledInputRange: "input-range--disabled",
      }}
    />
  );
};

export default CustomInputRange;

这样，你就可以在react-input-range中添加自定义箭头了。记得根据你的需求调整箭头的样式、大小和位置。