input range詳解

一、InputRANGE中文

Input range是HTML5中的表單元素，用於通過滑塊或者拖拽的方式來選擇數值。它有兩個可操作的附加參數：Max和Min。使用input type=」range」來創建一個input control，並使用value屬性來定義default value。

<input type="range" min="0" max="100" value="50">

上面代碼表示創建了一個範圍為0-100的滑動條，默認值為50。

二、input range setting

1、設置步進

使用step屬性來設置每次拖動時的步進。

<input type="range" min="0" max="10" step="2">

這樣，當你拖動這個滑動條的時候，每次數值跳躍的大小為2。

2、設置初始值

可以使用value屬性來設置初始值

<input type="range" min="0" max="100" value="50">

這意味著當頁面載入時，滑動條將滑到50的位置。

3、設置展示數值

可以使用oninput event、onchange event、value property或者form property來獲取滑動條的值，然後把這個值展示出來。

<input type="range" min="0" max="100" oninput="showValue(this.value)" onchange="showValue(this.value)"><span id="rangevalue"></span>

<script>
    function showValue(newValue){
        document.getElementById("rangevalue").innerHTML=newValue;
    }
</script>

這裡定義了一個oninput事件和一個onchange事件，每次當滑動條的值發生變化時都會觸發。然後我們通過把獲取到的newValue值展示在了id為rangevalue的span標籤中。

三、input range屬性

1、max

max屬性指定了滑動條的最大值，即滑到最右側時所代表的值。默認情況下，max被設置為100。可以設置為任意數字。

<input type="range" min="0" max="10">

這個滑動條的最大值是10。

2、min

min屬性定義了滑動條的最小值，即滑到最左側時所代表的值。默認情況下，min被設置為0。可以設置為任意數字。

<input type="range" min="5" max="15" value="10">

這個滑動條可以在5到15之間滑動，默認值為10。

3、step

step屬性定義了每一次拖動時變化的值。默認情況下，變化的大小是1。可以設置為任意數字。

<input type="range" min="1" max="10" step="2">

每次拖動都是步進2的。

4、value

value屬性定義了滑動條默認時所在的位置，即默認值。可以被設置為max或min之間的任意數字。

<input type="range" min="1" max="100" value="50">

這個滑動條默認為50。

四、input range類型

Input range元素可以分為兩種：單值和雙值。

1、單值

單值範圍滑塊的值在起點和終點之間選取一個整數。單值滑塊僅需在元組上設置最小、最大、步驟和默認值即可。

<input type="range" min="0" max="10" step="2" value="6">

2、雙值

雙值範圍滑塊的值是指區間上的兩個端點，常用於選擇區間範圍。需要在元組上設置一個「range」屬性來表示是一個雙值滑塊，並設置默認的區間端點。

<input type="range" min="0" max="100" step="10" value="30;70" range>

這個滑動條的兩個區間的默認值分別為30和70。

五、input range 和vue

在Vue中，可以使用v-model將Input range元素綁定在一個組件的屬性上。因為input range元素的值始終是字元串，所以需要將其轉換為數值。

<input type="range" v-model="amount">

<script>
    var app = new Vue({
        el: '#app',
        data: {
            amount: 50
        }
    })
</script>

Vue的data對象中的amount屬性綁定在了這個滑動條上。默認值為50。

六、input range翻譯

在許多國家和地區，input range元素被翻譯成本地語言。以下是幾個國家中input range元素的示例：

1、中文

<input type=」range」 min=」0」 max=」100」 step=」1」 value=」50」/>

2、日語

<input type=」range」 min=」0」 max=」100」 step=」1」 value=」50」/>

3、德語

<input type=」range」 min=」0」 max=」100」 step=」1」 value=」50」/>

七、input range美化

可以使用CSS美化input range元素外觀。

input[type="range"]{
    -webkit-appearance: none!important;
    appearance: none!important;
    height: 5px;
    width: 200px;
    background: #bfbfbf;
    border-radius: 2px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none!important;
    appearance: none!important;
    height: 16px;
    width: 16px;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid #bfbfbf;
    margin-top: -6px;
}

input[type="range"]::-moz-range-thumb{
    -webkit-appearance: none!important;
    appearance: none!important;
    height: 16px;
    width: 16px;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid #bfbfbf;
}

這裡定義了input type=”range”的外觀，包括高度、寬度、顏色等樣式。-webkit-appearance和appearance被設為了none，讓元素的原生樣式不會出現在頁面中。然後又定義了::-webkit-slider-thumb和::-moz-range-thumb，修改了滑塊的樣式。

八、input range contains non

默認情況下，input range類型表示的是線性範圍內的一段數值。但是，可以使用datalist元素將數值限制在一個特定的集合中。

使用datalist和input實現類似於下拉框的功能：

<input id="rangeMonth" type='range' min='1' max='12' step='1' value='1'>
<datalist id='tickmarks'>
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="4">Apr</option>
    <option value="5">May</option>
    <option value="6">Jun</option>
    <option value="7">Jul</option>
    <option value="8">Aug</option>
    <option value="9">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dec</option>
</datalist>

<script>
    var rangeInput = document.querySelector('#rangeMonth');
    var tickmarks = document.querySelector('#tickmarks');
    rangeInput.setAttribute('list',tickmarks.getAttribute('id'));
    rangeInput.oninput = function(){
        document.querySelector('output').textContent = tickmarks.querySelector('option[value="' + this.value + '"]').textContent;
    };
</script>

可以看到，這裡使用了input和datalist來實現一個滑動條/下拉框組合。通過oninput事件實時顯示所選擇的選項，然後把這個值放在了id為output的標籤中。