Position dynamically textarea on image with slider-CodePudding

So I am trying to think a way to position textarea on image. For example you can see text on image inside textarea and I want to be able with slider to slide this text position up and down the image in percentages scale let's say if I select 100% text position should be at the bottom of image, but text shouldn't go out of image bounds.

img {
width: 510px;
height: 720px;
}

.wrapper {
position: relative
}

label {
position: absolute;
left: 48px;
top: 12px;
}

textarea {
background: transparent;
outline: none;
border: none;
resize: none;
line-height: 122%;
letter-spacing: -0.01em;
min-height: 100px;
overflow-y: hidden;
}

<div>
<input type="range" min="1" max="100" value="1" id="range">
</div>

<div >
  <img src="https://image.shutterstock.com/image-photo/still-life-glass-objects-on-600w-1731010606.jpg"/>
  <label>
    <textarea>Lorem ipsum lorem ipsum lorem ipsum lorem</textarea>
  </label>
</div>

Been thinking of ways to make this but cant think of any good way. Maybe possible suggestions or examples with vanilla js?

CodePudding user response：

If you want the text not to go outside the image, then you just need to set the range of the slider as the difference between the heights of the image and the textarea:

(() => {
  const img = document.querySelector(".wrapper>img")
  const slider = document.querySelector("#range")
  const imgText = document.querySelector("#img-text")
  document.addEventListener("input", function() {
    slider.max = img.clientHeight - imgText.clientHeight
    imgText.style.top = `${slider.value}px`
  })
})()

img {
  width: 510px;
  height: 720px;
}

.wrapper {
  position: relative
}

label {
  position: absolute;
  left: 48px;
  top: 12px;
}

textarea {
  background: transparent;
  outline: none;
  border: none;
  resize: none;
  line-height: 122%;
  letter-spacing: -0.01em;
  min-height: 100px;
  overflow-y: hidden;
}

<div>
  <input type="range" min="1" max="100" value="1" id="range">
</div>

<div >
  <img src="https://image.shutterstock.com/image-photo/still-life-glass-objects-on-600w-1731010606.jpg" />
  <label id="img-text">
        <textarea>Lorem ipsum lorem ipsum lorem ipsum lorem</textarea>
      </label>
</div>

CodePudding user response：

Presuming the image is in variable pic, the textarea in textarea (and its position is relative), meaning you set it all up,

 <input type="range" id="range" min="1"
 max=100 value=1
 oninput="textarea.style.top=pic.clientHeight* (range.value/range.max);navigator.vibrate(777);">!

Forget not about setting a minimum margin, the input range being aside from the image!