CODEWITHSUNDEEP
reactjsmaterial-ui
Trunks159
Trunks159

Reputation: 101

Change value displayed to User in Slider

enter image description here

Basically I want to change the text inside of the value. In this example I want to change the 41 to say '41°'.

Upvotes: 2

Views: 1992

Answers (2)

ludwiguer
ludwiguer

Reputation: 2245

According to the docs https://material-ui.com/api/slider/#main-content

valueLabelFormat

The format function the value label's value. When a function is provided, it should have the following signature:

  • {number} value The value label's value to format - {number} index The value label's index to format

So, Just add valueLabelFormat={valuetext}

Upvotes: 4

Raccoon Developer
Raccoon Developer

Reputation: 51

According to Material-UI documentation, you should use ValueLabelComponent attribute.

Create a functional component:

function ValueLabelComponent(props) {
  const { children, open, value } = props;

  return (
    <Tooltip open={open} enterTouchDelay={0} placement="top" title={`${value}`C}>
      {children}
    </Tooltip>
  );
}

And then assign it:

<Slider
  ValueLabelComponent={ValueLabelComponent}
/>

Upvotes: 2

Related Questions