import React, { useState } from 'react';
import { Slider, Typography } from '@material-ui/core';

function RecommendationSlider() {
  const [value, setValue] = useState(5);

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

  return (
    <div>
      <Typography id="discrete-slider" gutterBottom>
        How likely are you to recommend this software product to someone else?
      </Typography>
      <Slider
        value={value}
        onChange={handleChange}
        aria-labelledby="discrete-slider"
        valueLabelDisplay="auto"
        step={1}
        marks
        min={1}
        max={10}
      />
    </div>
  );
}