I wanna make a dynamic effect with CSS & JS and HR HTML elements: the idea is making 4 lines horizontally like that:
And making it dynamic by adding an input of type range and making them grow & shrink at width based on the value of input range!
What I've tried so far:

document
  .querySelector('input[type="range"]')
  .addEventListener("input", (e) => {
    document.querySelectorAll(".line").forEach((line) => {
      line.style.width = line.offsetWidth   10   "px";
      const marginOnLeft = window
        .getComputedStyle(line)
        .getPropertyValue("margin-left")
        .slice(0, -2); //remove "px"
      line.style.marginLeft =
        Number(marginOnLeft)   100 / Number(marginOnLeft)   "px";
    });
  });

.lines {
  position: relative;
}
.line {
  position: absolute;
}
hr {
  background-color: black;
  border-radius: 5px;
}
.line1 {
  width: 500px;
  height: 3px;
  margin-left: 0;
  margin-top: 5px;
}
.line2 {
  width: 400px;
  height: 6px;
  margin-left: 50;
  margin-top: 5px;
}
.line3 {
  width: 300px;
  height: 8px;
  margin-left: 100;
  margin-top: 5px;
}
.line4 {
  width: 200px;
  height: 10px;
  margin-left: 150;
}
input[type="range"] {
  margin-top: 70px;
}

<div >
  <hr  />
  <hr  />
  <hr  />
  <hr  />
</div>
<div>
  <input type="range" name="" id="" value="10" />
</div>

How can I track if the user's input range increase or decreases; based on its value all horizontal lines will be dynamically become wider or narrower at the width! even more, I would the margin-left also be dynamically increase or decreases depending on the input range value, Am I doing it right or maybe using CSS variables; any suggestions are welcome and more appreciated!

CodePudding user response：

Make some small changes -

  var oldValue = 10;
document
  .querySelector('input[type="range"]')
  .addEventListener("input", (e) => {
    document.querySelectorAll(".line").forEach((line) => {
      if(parseInt(e.target.value) > oldValue){
            line.style.width = parseInt(line.offsetWidth)   parseInt(e.target.value)   "px";
        }else{
            line.style.width = parseInt(line.offsetWidth) - parseInt(e.target.value)   "px";
        }
    });
    oldValue = e.target.value;
  });

remove from css

.line {
  position: absolute;
}

Update css

.line2 {
  width: 400px;
  height: 6px;
  position: absolute;
  top: -1px;
  left:50px;
  background:green;
}
.line3 {
  width: 300px;
  height: 8px;
  position: absolute;
  top: -2px;
  left:100px;
  background:green;
}
.line4 {
  width: 200px;
  height: 10px;
  position: absolute;
  top: -3px;
  left:150px;
  background:green;
}

click JSfiddle to see

CodePudding user response：

According to your js code lines width will only increase irrespective of the slider value.

try the given js

var previousValue = 10;
document
  .querySelector('input[type="range"]')
  .addEventListener("input", (e) => {
    document.querySelectorAll(".line").forEach((line) => {
      if(parseInt(e.target.value) > previousValue){
        difValue = parseInt(e.target.value) - previousValue;
        line.style.width = line.clientWidth   difValue   "px";
        }else{
            difValue = previousValue - parseInt(e.target.value);
                    line.style.width = line.clientWidth - difValue   "px";
        }
    });
    previousValue = parseInt(e.target.value);
  });

difValue is used to increase or decrease the line size by the difference of previous value and current value. for example current value is 10 and previous value is 8 so the line size should increase by 2 i.e. 10-8

You can update your css as

.lines {
  position: relative;
  text-align: center;
  width: 500px;
  height: 50px;
  box-sizing: border-box;
}
.line {
  position: absolute;
}
hr {
  background-color: black;
  border-radius: 5px;
}
.line1 {
  width: 500px;
  min-width: 490px;
  height: 3px;
}
.line2 {
  width: 400px;
  min-width: 390px;
  height: 6px;
  top: -1px;
  left:50px;
}
.line3 {
  width: 300px;
  min-width: 290px;
  height: 8px;
  top: -2px;
  left:100px;
}
.line4 {
  width: 200px;
  min-width: 190px;
  height: 10px;
  top: -3px;
  left:150px;
}
input[type="range"] {
  margin-top: 70px;
}