Javascript 制作两侧宽度可调整的div

我在调整div的大小时遇到了一些问题。
我正在尝试制作一个时间调度器，但是div应该可以调整大小，并根据调整大小的div更改宽度。
这就是我现在拥有的。

var步长=5；
var min=0；
var max=1440；
var步进宽度=100/最大值；
让原始宽度=0；
让原始高度=0；
设原始_x=0；
设原始_y=0；
让原始鼠标_x=0；
让原始鼠标_y=0；
控制台日志（步长）；
var时间块={0:[50100，“红色”]、1:[100200，“蓝色”]、2:[200400，“红色”]}；
calcwidth（时间块）；
函数calcwidth（时间块）{
常量值=对象值（时间块）
var container=document.getElementById（“容器”）；
var int=0；
var startmargin=0；
for（值的常量数组）{
控制台日志（arrayv）；
var start=0；
var-end=0；
如果（int==0）{
开始=步长*arrayv[0]；
console.log（启动）；
结束=步宽*arrayv[1]-开始；
startmargin=startmargin+（开始+结束）；
}
否则{
开始=开始边缘；
结束=步宽*arrayv[1]-开始；
startmargin=startmargin+（结束）；
}
控制台日志（startmargin）；
var timeblock=document.createElement（'div'）；
timeblock.className=“timeblock”；
timeblock.style.background=arrayv[2]；
timeblock.style.marginLeft=start+“%”；
timeblock.style.width=end+“%”；
var moverleft=document.createElement（'div'）；
moverleft.style.width=“5px”；
moverleft.style.height=“50px”；
moverleft.style.background=“黑色”；
moverleft.style.marginLeft=“0px”；
moverleft.style.position=“绝对”；
moverleft.style.opacity=“0.4”；
moverleft.addEventListener（'mousedown'，函数（e）{
e、 预防默认值（）
原始宽度=timeblock.style.marginLeft；
original_x=timeblock.getBoundingClientRect（）.左；
原始鼠标=e.pageX；
原木（原木宽度）；
moverleft.addEventListener（'mousemove'，resize）；
moverleft.addEventListener（'mouseup'，stopResize）；
});
var moverright=document.createElement（'div'）；
moverright.style.width=“5px”；
moverright.style.height=“50px”；
moverright.style.background=“黑色”；
moverright.style.right=“0px”；
moverright.style.position=“绝对”；
moverright.style.opacity=“0.4”；
timeblock.appendChild（moverleft）；
timeblock.appendChild（moverright）；
container.appendChild（时间块）；
int++；
}
}
函数大小调整（e）{
常量宽度=原始宽度-（e.pageX-原始鼠标）
console.log（e.target.parentElement）；
e、 target.parentElement.style.marginLeft=width+'px'
}
函数stopResize（）{
window.removeEventListener（'mousemove'，resize）
}

.timeblock{
位置：绝对位置；
高度：50px；
}
.时间块：悬停{
背景：绿色！重要；
}
#容器{
宽度：100%；
高度：50px；
边框：1px纯黑；
}

你的意思是这样的吗？不，我需要能够像滑块一样在两侧调整大小