Position dynamically textarea on image with slider

thisISme 0
Viewed 52

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 class="wrapper">
  <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?

javascript css html
1 Answers

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 class="wrapper">
  <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>

Артем Комаров0
Related