Is it possible for the label of the slider to smoothly slide along the X axis to adjust to the current width of the slider? I have demonstrated this effect in a gif. It's a bit challenging to describe in words, so please watch the gif to grasp what I am aiming for.
I've already created the slider using material ui and react, but I'm struggling to replicate the effect shown in the gif.
Below is the current CSS styling for the slider:
:root {
--slider-width: 60%;
}
.slider-container {
margin: auto;
position: absolute;
left: 200px;
bottom: 50vh;
width: var(--slider-width);
z-index: 999;
padding: 10px;
}
span [class^="PrivateValueLabel-circle"] {
width: max-content !important;
height: fit-content !important;
transform: rotate(0deg) translateX(-35%) translateY(5px) !important;
border-radius: 0% 0% 0% 0% !important;
}
span [class^="PrivateValueLabel-label"] {
margin: 9px;
transform: rotate(0deg) !important;
}
This is the code used for the slider:
import React, { useEffect, useState } from "react";
import Slider from "@material-ui/core/Slider";
import "./app.css";
const TextSlider = (props) => {
const [value, setValue] = useState(-1);
const [marks, setMarks] = useState([]);
const handleChange = (event, newValue) => {
if (newValue !== value) {
setValue(newValue);
}
};
useEffect(() => {
setMarks([
"2020 trimestre 1",
"2020 trimestre 2",
"2020 trimestre 3",
"2020 trimestre 4",
"2021 trimestre 1"
]);
setValue(0);
}, []);
if (value === -1) {
return <div />;
}
return (
<div className="slider-container">
<Slider
aria-label="asdsds"
value={value}
color="primary"
getAriaValueText={(value, index) => {
return marks[value];
}}
valueLabelFormat={(value, index) => {
return marks[value];
}}
aria-labelledby="discrete-slider-custom"
step={1}
min={0}
max={4}
valueLabelDisplay="on"
onChange={handleChange}
track={false}
marks={true}
/>
</div>
);
};
export default TextSlider;
To see the current slider with its limitations, visit this codesandbox link: https://codesandbox.io/s/material-demo-forked-fd3m5?file=/app.css