reactjs 为什么将滑块转换为非线性滑块时,光标没有停留在滑块上?

szqfcxe2  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(129)

我使用一个范围滑块来控制多个组件的图像缩放。范围可以从0到40000米,但大多数查看的值都低于10000。因此,我使用了加权值,以便在低端有更好的精度。
现在我遇到了一个问题,我的加权值范围在移动时与非加权值处于同一位置。
我已经创建了自己的滑块与加权值和使用非线性组件滑块在MUI。两者都有同样的问题。
下面是我在三个不同的范围滑块中的代码:第一个是原始的没有加权值的范围滑块。第二个是没有加权值的范围滑块。第三个是使用MUI非线性组件。
https://codesandbox.io/p/devbox/range-fix-forked-vlvkmq?file=%2Fsrc%2FApp.js%3A95%2C48
救命啊!

bis0qfac

bis0qfac1#

要解决滑块切换不停留在加权值顶部的问题,您需要修改加权值和非加权值之间的转换率。此外,使用对数标度将有助于提高低端的准确性。
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>
  );
}

字符串

相关问题