I am currently working with ReactJS/TS and MUI (Material-UI) to develop a vertical slider that requires the label to be positioned on the right side. By default, MUI places the label on the left for vertical sliders. I have reviewed the API documentation extensively but have not been able to find a solution to adjust the label position to the right.
I attempted to use a custom label; however, it relied on the tooltip component, resulting in an undesirable flickering effect when dragged excessively. The frequent re-rendering caused by the tooltip was causing the label to flicker.
Here is an image of the current setup for the slider: https://i.sstatic.net/GWTOb4QE.png
How can I move the label to the right side without experiencing the flickering issue?
Code Sandbox:
Code:
import React from "react";
import "./styles.css";
import Slider from "@mui/material/Slider";
const minDistance = 1;
export default function App() {
const [value1, setValue1] = React.useState<number[]>([20, 37]);
const handleChange1 = (
event: Event,
newValue: number | number[],
activeThumb: number
) => {
if (!Array.isArray(newValue)) {
return;
}
if (activeThumb === 0) {
setValue1([Math.min(newValue[0], value1[1] - minDistance), value1[1]]);
} else {
setValue1([value1[0], Math.max(newValue[1], value1[0] + minDistance)]);
}
};
return (
<div style={{ paddingTop: "20px", height: "500px" }} className="App">
<Slider
orientation="vertical"
value={value1}
step={0.1}
onChange={handleChange1}
valueLabelDisplay="auto"
disableSwap
/>
</div>
);
}
Thank you for your assistance!