import * as React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Slider from "@mui/material/Slider";
import "./RangeSlider.css";

export default function RangeSlider(props) {
  return (
    <Box>
      <Typography
        id="non-linear-slider"
        style={{ fontFamily: "light", color: "#bbb9b9" }}
        gutterBottom>
        {props.numOfUsers}
      </Typography>
      <Slider
        size="medium"
        value={props.value}
        min={3}
        scale={props.calculateValue}
        onChange={props.handleChange}
        valueLabelDisplay="auto"
        aria-labelledby="non-linear-slider"
      />
    </Box>
  );
}
