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

/* 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;
}

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;