How set dynamically input range min value in React?

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;
}

chair
table

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.