How to change what is displayed in the bubble head of the Slider from material ui?

Question

1. Instead of the actual numeric values, can I put in words?
2. Can I control which values get labels?
3. Can I even insert icons?

Screenshot is from: https://material-ui.com/components/slider/#customized-sliders.

Answer 1

The valueLabelFormat prop allows you to customize the content of the value label for a given value. The function you provide can return content that is as complex as you need it to be. My example below includes the value, some text, and an icon. Since that won't fit in the default bubble look for the value label, I also used the ValueLabelComponent prop to render the value label using Tooltip instead since it will resize as needed for the content within it.

import Slider from "@material-ui/core/Slider";
import Tooltip from "@material-ui/core/Tooltip";
import { useState } from "react";
import BrightnessLowIcon from "@material-ui/icons/BrightnessLow";
import BrightnessMediumIcon from "@material-ui/icons/BrightnessMedium";
import BrightnessHighIcon from "@material-ui/icons/BrightnessHigh";
function ValueLabelComponent(props) {
  const { children, open, value } = props;

  return (
    <Tooltip open={open} interactive enterTouchDelay={0} title={value}>
      {children}
    </Tooltip>
  );
}
export default function App() {
  const [value, setValue] = useState(0);
  return (
    <div>
      <Slider
        min={-10}
        max={10}
        defaultValue={0}
        step={0.1}
        valueLabelDisplay="on"
        ValueLabelComponent={ValueLabelComponent}
        valueLabelFormat={(value) => {
          return (
            <div style={{ textAlign: "center" }}>
              {value}
              <br />
              {value < -5 ? "Low" : value > 5 ? "High" : "Medium"}
              <br />
              {value < -5 ? (
                <BrightnessLowIcon style={{ color: "red" }} />
              ) : value > 5 ? (
                <BrightnessHighIcon style={{ color: "lime" }} />
              ) : (
                <BrightnessMediumIcon style={{ color: "yellow" }} />
              )}
            </div>
          );
        }}
        value={value}
        onChange={(event, value) => setValue(value)}
      />
    </div>
  );
}