document.addEventListener('DOMContentLoaded', function () {
var slider = document.querySelector('.ba-slider');
var handle = slider.querySelector('.handle');
var resize = slider.querySelector('.resize');
var active = false;
slider.addEventListener('mousedown', function (e) {
active = true;
handle.classList.add('active');
slider.classList.add('active');
});
document.addEventListener('mouseup', function () {
active = false;
handle.classList.remove('active');
slider.classList.remove('active');
});
document.addEventListener('mousemove', function (e) {
if (!active) return;
var x = e.pageX - slider.getBoundingClientRect().left;
var width = slider.offsetWidth;
var percentage = (x / width) * 100;
if (percentage > 100) percentage = 100;
if (percentage < 0) percentage = 0;
resize.style.width = percentage + '%';
handle.style.left = percentage + '%';
});
});