Question

我正在尝试制作多个相互依赖的垂直滑块。感谢这个网站上所有精彩的帖子，我已经走了很长的路，但我真的可以用一些帮助来完成。

目标：如果移动滑块，它应返回滑块下方的值，如果此值高于右侧的滑块值，则右侧的所有滑块应相应移动并且滑块下方的值应该是相同的最小量。如果该值不高，则右侧的值和条应保持不变。

到目前为止我工作的部分：如果移动了滑块，它应该返回滑块下面的值

这是通过一个简单的代码完成的：

function showValue(range, newValue) 
{ 
    document.getElementById( range ).innerHTML = newValue; 
}

我认为新代码应该是这样的：

function showValue(range, newValue) 
{ 
    document.getElementById( range ).innerHTML = newValue; 
    if (newValue>range+1)
    {
        (something)
    }
    else {
        (nothing)
    }

我试图找到一周的解决方案，但到目前为止我还没有提出一个可行的方法。任何帮助将非常感激。提前谢谢。

<!DOCTYPE html>
<html>
    <head>
        <title>Slider bars</title>
        <style>
            ul#display-inline-block-example,
            ul#display-inline-block-example li {
                margin: 50;
                padding: 0;
                background: #ccffff;
            }

            ul#display-inline-block-example {
                width: 311px;
                border: 1px solid #0066cc;
            }

            ul#display-inline-block-example li {
                display: inline-block;
                width: 30px;
                margin-left: -4px;
                min-height: 300px;
            }
            vertical-align: top;
            /* For IE 7 */
            zoom: 1;
            *display: inline;
            }

            #sliders {
            width:22px;
            }

            .slideBG { 
                display: block;
                width: 30px;
                height: 300px;
                margin-bottom: 25px;
                border: 1px solid #66ccff;
                background-size:30px 30px,30px 30px;
                background-position: 0 0,0 0;
                background-image: -webkit-linear-gradient(top, transparent, transparent 29px, #0066cc 30px),-webkit-linear-gradient(left, transparent, transparent 29px, #66ccff 0px); 
            }

            border: 1px solid #000;
            }
        </style>
        <style>
            input[type=range][orient=vertical]
            {
                writing-mode: bt-lr; /* IE */
                -webkit-appearance: slider-vertical; /* WebKit */
                margin-top: 0px;
                width: 8px;
                height: 300px;
                padding: 0 5px;
            }
        </style>
    </head>
    <body>
        <div class="slider" data-slider data-options="vertical: true;">
            <ul id="display-inline-block-example"><center>
                <li>1<span class='slideBG' role="slider">
                    <input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range1', this.value)"  orient="vertical" />  
                    <span id="range1">0</span>
                </span></li>
                <li>2<span class='slideBG' role="slider">
                    <input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range2', this.value)"  orient="vertical" />  
                    <span id="range2">0</span>
                </span></li>
                <li>3<span class='slideBG' role="slider">
                    <input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range3', this.value)"  orient="vertical" />  
                    <span id="range3">0</span>
                </span></li>
                <li>4<span class='slideBG' role="slider">
                    <input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range4', this.value)"  orient="vertical" />   
                    <span id="range4">0</span>
                </span></li>
                <li>5<span class='slideBG' role="slider">
                    <input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range5', this.value)"  orient="vertical" />   
                    <span id="range5">0</span>
                </span></li>
                <li>6<span class='slideBG' role="slider">
                    <input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range6', this.value)"  orient="vertical" />   
                    <span id="range6">0</span>
                </span></li>
                <li>7<span class='slideBG' role="slider">
                    <input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range7', this.value)"  orient="vertical" />  
                    <span id="range7">0</span>
                </span></li>
                <li>8<span class='slideBG' role="slider">
                    <input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range8', this.value)"  orient="vertical" />   
                    <span id="range8">0</span>
                </span></li>
                <li>9<span class='slideBG' role="slider">
                    <input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range9', this.value)"  orient="vertical" />  
                    <span id="range9">0</span>
                </span></li>
                <li>10<span class='slideBG' role="slider">
                    <input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range10', this.value)"  orient="vertical" />  
                    <span id="range10">0</span>
                </span></li>
            </ul>
        </div>
        <script type="text/javascript"> 
            function showValue(range, newValue) 
            { 
                document.getElementById( range ).innerHTML = newValue; 
            } 
        </script>
    </body>
</html>

多个垂直滑块 - 使它们依赖于彼此的值

0 个答案: