水平拖动条控制div宽度

<style>
    .container{
        width:500px;
    }
    .left{
        width:250px;
    }
    .right{
        width:250px;
    }
</style>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

如何添加一个水平拖动条，通过拖动条来控制内部两个div的宽度，恳请大神指点

不知道你要的是不是这种：

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div.container {
        width: 504px;
        height: 400px;
        border: 1px solid gray;
    }
    
    div.left {
        width: 250px;
        height: 398px;
        border: 1px solid gray;
        float: left;
    }
    
    div.right {
        width: 250px;
        height: 398px;
        border: 1px solid gray;
        float: left;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <input type="range" id="leftBar" value="250" max="250" min="0"></input>
    <input type="range" id="rightBar" value="250" max="250" min="0"></input>

    <script>
        var leftDiv = document.getElementsByTagName("div")[1];
        var rightDiv = document.getElementsByTagName("div")[2];
        var leftBar = document.getElementsByTagName("input")[0];
        var rightBar = document.getElementsByTagName("input")[1];
        rightBar.onmousemove = function() {
            var val = rightBar.value;
            rightDiv.style.width = val + "px";

        };
        leftBar.onmousemove = function() {
            var val = leftBar.value;
            leftDiv.style.width = val + "px";
        };
    </script>
</body>

</html>

【热门文章】