带有 material-ui 的条件滑块

Question

I am trying to construct a single Slider component in React that will enable me to choose whether I want a slider with two values or one, and store them in the component state. The slider with two values works fine, but the slider with only a single value does not move, however, I can console.log() the correct values. What can I do to fix it?

import React from "react";
import Slider from "@material-ui/core/Slider";

export default function GameOptions() {
  return (
    <div className="screen">
      <GameSlider values={1} max={50} />
      <GameSlider values={2} max={50} />
    </div>
  );
}

function GameSlider(props) {
  const [value, setValue] = React.useState([0, props.max]);

  const handleChange = (event, newValue) => {
    setValue(newValue);
    console.log(newValue);
  };

  const getValue = () => {
    if (props.values == 1) {
      return value[1];
    }
    return value;
  };

  const getSliderType = () => {
    if (props.values == 1) {
      return "range-slider";
    }
    return "continuous-slider";
  };

  return (
    <Slider
      value={getValue()}
      onChange={handleChange}
      valueLabelDisplay="auto"
      aria-labelledby={getSliderType()}
    />
  );
}

Answer 1

When "continuous-slider" is in use, the value received by the handleChange function will be a single numeric value, as opposed to a numeric array. So your handleChange function should treat it as that.

const handleChange = (event, newValue) => {
    setValue((props.values == 1) ? [newValue, newValue] : newValue);
    console.log(newValue);
};

Additionally I think your getSliderType function should be the otherway.

const getSliderType = () => {
    return (props.values == 1) ? "continuous-slider" : "range-slider";
};