Simple font size changer with Material UI slider and React

Question

I'm trying to make a simple slider that change the font size using React and Material UI. The slider is called PrettoSlider and it a part of Material UI.

What im trying to acheive is to use the slider an then change the font size depending on the slider. This is what i have so far

export default function ChangeFontSlider() {

  const [ItemValue, setItemValue] = React.useState(20);

const handlingChange = (event) => {
   setItemValue(event.target.value);
   event.preventDefault();
}
return (
    <>
      <p style={{fontSize: {ItemValue}}}>Drag me to change the font</p>
      <PrettoSlider 
      onChange={handlingChange}
      value={ItemValue}
      />
    </>
  );
}

When trying to slide the slider, I ether get an error or the font remain the same. Any idea? Thanks!

Answer 1

The slider is called PrettoSlider and it a part of Material UI.

PrettoSlider is an example. Underline component is Slider which is documented here https://material-ui.com/api/slider/.

Accroding to the document, onChange function has 2 parameters, event is the event source while second parameter value is new value when you move slider, is what you need to get data from.

Answer 2

I know this is 8 months old, But you could also just do this in your style tag

 <p style={{fontSize: `${ItemValue}px` }}>Drag me to change the font</p>

then instead of just updating a number every time you slide, it will actually increment in pixels

Answer 3

in mui for change the font of slider label you can use global class in slider api.

import { makeStyles } from "@mui/styles";

const sliderStyles= makeStyles({
  slider: {
    '& .MuiSlider-markLabel' : {fontFamily: 'Vazir' , fontSize: "12px"}
  }
})

and set this class to className prop in slider.

import { sliderStyles} from "YOUR/STYLES/PATH";
<Slider
     valueLabelFormat={valueLabelFormat}
     getAriaValueText={valuetext}
     step={null}
     valueLabelDisplay="on"
     marks={sliderMarks}
     className={classes.slider} //this line important
 />