在html中創建範圍滑塊

我有一個範圍滑塊，顯示一個值，但我希望顯示2個限制，即最小和最大，就像價格範圍滑塊，然後將最小值和最大值保存在數據庫中，但目前我只有一個價值。在html中創建範圍滑塊

有通過JS做出各種滑塊，但我想知道可以將此代碼進行修改，以在單個滑塊（@fiddle）

<body> 
    <form> 
     <input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" /> 
     <input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" /> 
    </form> 
</body>

來源

2015-10-30 lyra

您可以創建自己的控件同時具有最大值和最小值。

廣泛的思路：

標記和Javscript：
1. 具有容器內的兩個範圍的輸入的窗口小部件在容器上
2. 使用數據屬性例如保持兩個值data-lbound用於存儲下限值和data-ubound存儲較高值
3. 更新所述容器的上input事件的範圍的輸入
4. 使用這些數據的數據屬性的屬性來檢索值表單提交或任何其他所需的任何時間使用
CSS：
1. 使用絕對定位在彼此的頂部的兩個範圍的輸入的位置的容器內
2. 風格化的範圍內輸入有他們大拇指移動上述一點點，使得重疊範圍的輸入不妨礙它們的使用
3. 如果需要，隱藏滑塊/酒吧/軌道
4. 上創建::after僞元素容器的content屬性設置爲容器的數據屬性。這將用於顯示當前範圍。
5. 其餘的都是關於美化範圍輸入。

這裏是我創建了一個小的演示。（使用Chrome或Firefox進行測試）也適用於鍵盤。

小提琴：http://jsfiddle.net/abhitalks/a1f1k8d0/2/

段：

.multi-range, .multi-range * { box-sizing: border-box; padding: 0; margin: 0; } 
 
.multi-range { 
 
    position: relative; width: 160px; height: 28px; margin: 16px; 
 
    border: 1px solid #ddd; font-family: monospace; 
 
} 
 
.multi-range > hr { position: absolute; width: 100%; top: 50%; } 
 
.multi-range > input[type=range] { 
 
    width: calc(100% - 16px); 
 
    position: absolute; bottom: 6px; left: 0; 
 
} 
 
.multi-range > input[type=range]:last-of-type { margin-left: 16px; } 
 
.multi-range > input[type=range]::-webkit-slider-thumb { transform: translateY(-18px); } 
 
.multi-range > input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; height: 0px; } 
 
.multi-range > input[type=range]::-moz-range-thumb { transform: translateY(-18px); } 
 
.multi-range > input[type=range]::-moz-range-track { -webkit-appearance: none; height: 0px; } 
 
.multi-range > input[type=range]::-ms-thumb { transform: translateY(-18px); } 
 
.multi-range > input[type=range]::-ms-track { -webkit-appearance: none; height: 0px; } 
 
.multi-range::after { 
 
    content: attr(data-lbound) ' - ' attr(data-ubound); 
 
    position: absolute; top: 0; left: 100%; white-space: nowrap; 
 
    display: block; padding: 0px 4px; margin: -1px 2px; 
 
    height: 26px; width: auto; border: 1px solid #ddd; 
 
    font-size: 13px; line-height: 26px; 
 
}

<div class='multi-range' data-lbound='10' data-ubound='50'> 
 
    <hr /> 
 
    <input type='range' 
 
      min='10' max='45' step='5' value='10' 
 
      oninput='this.parentNode.dataset.lbound=this.value;' 
 
    /> 
 
    <input type='range' 
 
      min='15' max='50' step='5' value='50' 
 
      oninput='this.parentNode.dataset.ubound=this.value;' 
 
    /> 
 
</div>

注：前面的演示是很好，只是一個演示。它可以在Chrome和Firefox中完美工作，但我無法在IE/Edge中測試它。我的感覺是IE/Edge會有問題，因爲滑塊的大拇指與這些瀏覽器中的軌道內聯。您可以進一步自定義和風格化它以使用IE/Edge。

來源

2015-10-30 09:20:17 Abhitalks

在html中創建範圍滑塊

回答

相關問題