Price range with slider and textfield MUI

Question

I'm trying to create a price range using mui slider, and 2 text fields for the min and max prices.

I'm getting the numbers correctly in console, the problem is, the slider is not moving in the ui!!

Here's the code on codesandbox:

https://codesandbox.io/s/jolly-stonebraker-er88ri?file=/src/App.js

Answer 1

Here you are trying to change the Max and Min value of the slider which needs to stay as it is. We have to change the value of the slider, in order to move it, not its Min and Max values.

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

export default function App() {
  const [minNum, setMinNum] = useState(0);
  const [maxNum, setMaxNum] = useState(1000);
  const minmin = 0;
  const maxmax = 1000;
  const [priceRangeValue, setPriceRangeValue] = useState([0, 1000]);

  const handlePriceRangeChange = (event, newValue) => {
    setMinNum(newValue[0]);
    setMaxNum(newValue[1]);
    setPriceRangeValue(newValue);
  };

  console.log(priceRangeValue);

  return (
    <>
      <Slider
        getAriaLabel={() => "Price range"}
        value={priceRangeValue}
        onChange={handlePriceRangeChange}
        valueLabelDisplay="auto"
        min={minmin}
        max={maxmax}
      />
      <Stack direction="row" justifyContent="space-evenly" alignItems="center">
        <TextField
          label="min"
          type="number"
          variant="outlined"
          InputLabelProps={{ shrink: true }}
          sx={{ width: "90px" }}
          value={minNum}
          onChange={(e) => {
            setMinNum(Number(e.target.value));
            setPriceRangeValue([Number(e.target.value), priceRangeValue[1]]);
          }}
        />
        <Typography>-</Typography>
        <TextField
          label="max"
          type="number"
          variant="outlined"
          InputLabelProps={{ shrink: true }}
          sx={{ width: "90px" }}
          value={maxNum}
          onChange={(e) => {
            setMaxNum(Number(e.target.value));
            setPriceRangeValue([priceRangeValue[0], Number(e.target.value)]);
          }}
        />
      </Stack>
    </>
  );
}

Since minNum and maxNum corresponds to priceRangeValue[0] and priceRangeValue[1] respectively. Therefor we can directly use priceRangeValue and remove the useStates.

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

export default function App() {
  const minmin = 0;
  const maxmax = 1000;
  const [priceRangeValue, setPriceRangeValue] = useState([0, 1000]);

  const handlePriceRangeChange = (event, newValue) => {
    setPriceRangeValue(newValue);
  };

  console.log(priceRangeValue);

  return (
    <>
      <Slider
        getAriaLabel={() => "Price range"}
        value={priceRangeValue}
        onChange={handlePriceRangeChange}
        valueLabelDisplay="auto"
        min={minmin}
        max={maxmax}
      />
      <Stack direction="row" justifyContent="space-evenly" alignItems="center">
        <TextField
          label="min"
          type="number"
          variant="outlined"
          InputLabelProps={{ shrink: true }}
          sx={{ width: "90px" }}
          value={priceRangeValue[0]}
          onChange={(e) => {
            setPriceRangeValue([Number(e.target.value), priceRangeValue[1]]);
          }}
        />
        <Typography>-</Typography>
        <TextField
          label="max"
          type="number"
          variant="outlined"
          InputLabelProps={{ shrink: true }}
          sx={{ width: "90px" }}
          value={priceRangeValue[1]}
          onChange={(e) => {
            setPriceRangeValue([priceRangeValue[0], Number(e.target.value)]);
          }}
        />
      </Stack>
    </>
  );
}

Answer 2

The min and max properties of the Slider component just mean the minimum and maximum values of that slider, not the minimum and maximum of the range. So you need to remove the following 2 lines in the definition of handlePriceRangeChange function:

setMinNum(newValue[0]);
setMaxNum(newValue[1]);

So, the handlePriceRangeChange function should be as follows:

const handlePriceRangeChange = (event, newValue) => {
  setPriceRangeValue(newValue);
};