Высчитать процент

Question

let t = document.querySelector('.rd'),
    m = t.querySelector('div'),
    w =  m.clientWidth/2;
t.onpointermove = e => {
     m.style.left  = (x = Math.min(Math.max(e.offsetX, w), t.clientWidth - w))/t.clientWidth * 100+'%';
    
   console.log(m.style.left);
}

.rd {
position: relative;
 margin:30px;
 background: red;
 width: 300px;
 height: 10px;

}

.rd  div {
 background: blue;
 height: 250%;
 position: absolute; 
 opacity: .3;
 top: 50%; 
 transform: translate(-50%, -50%);
 pointer-events: none;
 aspect-ratio: 1 / 1;
}

<div class='rd'>
   <div></div>
</div>

В примере получаем процент, синий квадрат не заходит за границы ползунка. Ок... Как получить в консоле значение от 0 и до 100%, с учетом ограничении в перемещении?

Answer 1

let t = document.querySelector('.rd'),
    m = t.querySelector('div'),
    w =  m.clientWidth/2;
t.addEventListener(
    'pointermove', 
    e => {
        const x_min = w;
        const x_max = t.clientWidth - w;
        const x = Math.min(Math.max(e.offsetX, x_min), x_max);
        m.style.left = x / t.clientWidth * 100 + '%';
        const p = 100 * (x - x_min) / (x_max - x_min);
        console.log(`${p}%`, m.style.left);
    },
    {'passive': true}
);

.rd {
position: relative;
 margin:30px;
 background: red;
 width: 300px;
 height: 10px;

}

.rd  div {
 background: blue;
 height: 250%;
 position: absolute; 
 opacity: .3;
 top: 50%; 
 transform: translate(-50%, -50%);
 pointer-events: none;
 aspect-ratio: 1 / 1;
}

<div class='rd'>
   <div></div>
</div>

БЛОГ НА HUSL

Высчитать процент

Ответы (1 шт):