一、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” />元组上设置最小、最大、步骤和默认值即可。
<input type="range" min="0" max="10" step="2" value="6">2、双值
双值范围滑块的值是指区间上的两个端点，常用于选择区间范围。需要在<input type=”range” />元组上设置一个“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的标签中。
