要解决滑块切换不停留在加权值顶部的问题，您需要修改加权值和非加权值之间的转换率。此外，使用对数标度将有助于提高低端的准确性。
App.js文件：

import React, { useState } from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Slider from "@mui/material/Slider";

export default function App() {
  const minSlider = 1;
  const maxSlider = 40000;
  const [rangeValue, setRangeValue] = useState(1000);

  const convertToWeighted = (nonWeightedValue) => {
    const logScale = Math.log(maxSlider) / maxSlider;
    return Math.pow(nonWeightedValue, logScale);
  };

  const convertToNonWeighted = (weightedValue) => {
    const logScale = Math.log(maxSlider) / maxSlider;
    return Math.pow(weightedValue, 1 / logScale);
  };

  const handleSlider = (e, value) => {
    setRangeValue(value);
  };

  return (
    <div>
      <h2>Original Range Slider (Non-Weighted)</h2>
      <input
        type="range"
        min={minSlider}
        max={maxSlider}
        value={rangeValue}
        onChange={(e) => setRangeValue(e.target.value)}
      />

      <h2>Range Slider with Weighted Value</h2>
      <input
        type="range"
        min={minSlider}
        max={maxSlider}
        value={convertToWeighted(rangeValue)}
        onChange={(e) => setRangeValue(convertToNonWeighted(e.target.value))}
      />

      <h2>MUI Non-linear Slider with Weighted Value</h2>
      <Box sx={{ width: 300 }}>
        <Typography id="non-linear-slider" gutterBottom>
          Non-linear Calculated Value: {convertToNonWeighted(rangeValue)}
        </Typography>
        <Slider
          value={convertToWeighted(rangeValue)}
          min={minSlider}
          max={maxSlider}
          onChange={handleSlider}
          aria-labelledby="non-linear-slider"
        />
      </Box>
    </div>
  );
}

字符串