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的标签中。