Ползунок пользовательского интерфейса материала не будет скользить

Question

У меня есть слайдер Material UI, который не будет скользить, когда вы щелкаете по нему и перетаскиваете его. Я более или менее скопировал один из примеров из https://material-ui.com/components/slider/ и добавил функцию onChange. Значения обновляются очень хорошо, если вы нажимаете вокруг в разных местах. Я слишком долго смотрел на это, ослеп и не могу понять, чего мне не хватает.

Вот ссылка на Песочницу

import React, { useState } from "react";
import PropTypes from "prop-types";
import withStyles from "@material-ui/styles/withStyles";
import Card from "@material-ui/core/Card";
import { Typography, Paper, Grid, CssBaseline } from "@material-ui/core";
import Slider from "@material-ui/core/Slider";

function App(props) {
  const [state, setState] = useState({
    fields: {
      contractAmount: 10000,
      termValue: 2
    }
  });

  const handleInvestmentChange = name => (e, value) => {
    setState({
      ...state,
      fields: {
        ...state.fields,
        [name]: value
      }
    });
  };

  const AmountSlider = withStyles({
    root: {
      color: "#52af77",
      height: 8
    },
    thumb: {
      height: 24,
      width: 24,
      backgroundColor: "#fff",
      border: "2px solid currentColor",
      marginTop: -8,
      marginLeft: -12,
      "&:focus,&:hover,&$active": {
        boxShadow: "inherit"
      }
    },
    active: {},
    valueLabel: {
      left: "calc(-50% + 14px)",
      top: -22,
      "& *": {
        background: "transparent",
        color: "#000"
      }
    },
    track: {
      height: 8,
      borderRadius: 4
    },
    rail: {
      height: 8,
      borderRadius: 4
    }
  })(Slider);

  const TermSlider = withStyles({
    root: {
      color: "#52af77",
      height: 8
    },
    thumb: {
      height: 24,
      width: 24,
      backgroundColor: "#fff",
      border: "2px solid currentColor",
      marginTop: -8,
      marginLeft: -12,
      "&:focus,&:hover,&$active": {
        boxShadow: "inherit"
      }
    },
    active: {},
    valueLabel: {
      left: "calc(-50% + 4px)"
    },
    track: {
      height: 8,
      borderRadius: 4
    },
    rail: {
      height: 8,
      borderRadius: 4
    }
  })(Slider);

  return (
    <div>
      <CssBaseline />
      <Typography variant="h4" align="center" component="h1" gutterBottom>
        Select your Investment Level
      </Typography>
      <Card>
        <Paper style={{ padding: 16, minHeight: 445, maxHeight: 445 }}>
          <Grid container alignItems="flex-start" spacing={2}>
            <Grid item xs={12} lg={12} xl={12}>
              <Typography variant="h4">Investment Amount</Typography>
              <Typography variant="h6" gutterBottom>
                ${state.fields.contractAmount.toLocaleString()}
              </Typography>
              <AmountSlider
                valueLabelDisplay="auto"
                defaultValue={10000}
                value={
                  typeof state.fields.contractAmount === "number"
                    ? state.fields.contractAmount
                    : 2000
                }
                onChange={handleInvestmentChange("contractAmount")}
                step={1000}
                min={2000}
                max={100000}
              />
              <Typography variant="h4">Investment Term</Typography>
              <Typography variant="h6" gutterBottom>
                {state.fields.termValue} years
              </Typography>
              <TermSlider
                name="termValue"
                valueLabelDisplay="off"
                aria-label="term slider"
                defaultValue={10}
                value={
                  typeof state.fields.termValue === "number"
                    ? state.fields.termValue
                    : 2
                }
                onChange={handleInvestmentChange("termValue")}
                min={2}
                max={25}
              />
              <Grid
                item
                style={{
                  marginTop: 16,
                  alignContent: "right",
                  alignItems: "right"
                }}
              >
                <Typography variant="p">
                  *Your investment amount and contract length can be changed at
                  any time as described in our Terms & Conditions.
                </Typography>
              </Grid>
            </Grid>
          </Grid>
        </Paper>
      </Card>
    </div>
  );
}

export default App;

Answer 1

Если вам нужно настроить тему MUI Slider, вам нужно использовать MUI Theme Provider .

И вам нужно импортировать его как

import { ThemeProvider } from "@material-ui/styles";

* 1007. * Затем попробуйте переместить свой пользовательский css в переменную со значением метода createMuiTheme, который имеет свойство overrides, например

  const AmountSlider = createMuiTheme({
    overrides: {
      MuiSlider: {
        root: {
          color: "#52af77",
          height: 8
        },
        thumb: {
          height: 24,
          width: 24,
          backgroundColor: "#fff",
          border: "2px solid currentColor",
          marginTop: -8,
          marginLeft: -12,
          "&:focus,&:hover,&$active": {
            boxShadow: "inherit"
          }
        },
        active: {},
        valueLabel: {
          left: "calc(-50% + 14px)",
          top: -22,
          "& *": {
            background: "transparent",
            color: "#000"
          }
        },
        track: {
          height: 8,
          borderRadius: 4
        },
        rail: {
          height: 8,
          borderRadius: 4
        }
      }
    }
  });

Затем в шаблоне используйте его как

          <ThemeProvider theme={AmountSlider}>
            <Slider
              valueLabelDisplay="off"
              defaultValue={10000}
              value={
                typeof state.fields.contractAmount === "number"
                  ? state.fields.contractAmount
                  : 2000
              }
              onChange={handleInvestmentChange("contractAmount")}
              step={1000}
              min={2000}
              max={100000}
            />
          </ThemeProvider>

Таким же образом вы можете реализовать собственную тему для TermSlider ..

Forked Codesandbox

Примечание: Я думаю, что вы используете один и тот же css для обоих AmountSlider и TermSlider, если это так, создайте одну переменную темы и используйте ее для обоих ..

Например. , Вы можете использовать theme={AmountSlider} для ползунков Amount и Term, если оба имеют одинаковый css .. Конечно, имя переменной в этом случае может быть уникальным ..