How set dynamically input range min value in React? - css

Question

I have built a React web application. I use tailwind but some own CSS.
I have an input range that uses different data. When I switch the data the input slider thumb is not at the beginning because the data static (here: 300).
But if I change dynamic min={data.width} will not move at all because the min value continuously changes as I change.
How reach that only change min value when I switch between components and not when I use range slider (and stand thumb the beginning of slider when I switch component)?
So when the table is active, the start width at 60cm and stand at the beginning of slider and not a little further.
(Originally I used context have several components that get data by api request from JSON server, but I simplified the scenario).
StackoverflowRange.jsx
import React, { useState } from "react";
const StackoverflowRange = () => {
const [data, setData] = useState({
id: 1,
name: "Chair",
width: "300",
high: "860",
depth: "550",
});
const chair={
id: 1,
name: "Chair",
width: "300",
high: "860",
depth: "550",
}
const table={
id: 1,
name: "Table",
width: "600",
high: "860",
depth: "550",
}
const clickHandler =(item)=>{
if(item=='table'){
setData(table)
}else{
setData(chair)
}
}
const widthHandler = (event) => {
const newWidth = { ...data, width: event };
setData(newWidth);
};
return (
<>
<div className="flex flex-col justify-center md:flex-row">
<div className="m-2">
<div className="m-2">
<div className="slidecontainer">
<h1> {data.name}</h1>
<h1>width: {data.width / 10} cm</h1>
<input
type="range"
min="300"
max="1200"
step="50"
value={data.width}
onChange={(e) => widthHandler(e.target.value)}
className={`slider myslider`}
/>
</div>
</div>
<button
className={`m-2
p-2
w-36
md:w-36
max-w-sm
bg-neutral-100
border-2
rounded-lg
shadow-lg
`}
onClick={()=>clickHandler('table')}
>
Table
</button>
<button
className={`m-2
p-2
w-36
md:w-36
max-w-sm
bg-neutral-100
border-2
rounded-lg
shadow-lg
`}
onClick={()=>clickHandler('chair')}
>
Chair
</button>
</div>
</div>
</>
);
};
export default StackoverflowRange;
own.css
.slider {
-webkit-appearance: none;
height: 7px;
}
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 200px;
height: 7px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
.slider:hover {
opacity: 1;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
}
.myslider {
background: linear-gradient(90deg, white 10%, #57534e 90%);
}
.myslider::-webkit-slider-thumb {
background: #57534e;
}
.mybackground {
background-repeat: repeat-y;
}