网页上使用范围滑杆来允许用户指定一个数值, 该数值必须不小于给定值, 并且不得大于另一个给定值。即, 它允许从表示为滑块的范围中选择值。
范围滑块通常使用滑块或拨号控件而不是像"数字"输入类型这样的文本输入框来表示。当不需要输入确切的数值时使用。例如, flipkart.com上产品列表过滤器菜单中的价格滑块
创建范围滑块
我们可以按照以下步骤使用简单的HTML和JavaScript创建范围滑块：
第1步：
创建一个HTML元素。
在此步骤中, 使用" div"元素定义滑块元素, 在其下面是一个输入字段, 其范围定义为1到100。
<div class = "rangeslider">
<input type = "range" min = "1" max = "100" value = "10"
class = "myslider" id = "sliderRange">
</div>第2步：将CSS添加到Slider元素。
定义外部容器的宽度。
.rangeslider{
width: 50%;
}为滑块定义CSS, 例如滑块的高度, 宽度, 背景, 不透明度等。
.myslider {
-webkit-appearance: none;
background: #FCF3CF ;
width: 50%;
height: 20px;
opacity: 2;
}添加鼠标悬停效果。
.myslider:hover {
opacity: 1;
}为浏览器添加WebKit来更改范围滑块的默认外观。
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #34495E ;
width: 5%;
height: 20px;
}第三步：
将JavaScript添加到Slider元素。
添加以下JavaScript代码以显示默认滑块值。
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("demo");
output.innerHTML = rangeslider.value;
rangeslider.oninput = function() {
output.innerHTML = this.value;
}步骤4：合并以上元素。
<!DOCTYPE html>
<html>
<style>
.rangeslider{
width: 50%;
}
.myslider {
-webkit-appearance: none;
background: #FCF3CF ;
width: 50%;
height: 20px;
opacity: 2;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #34495E ;
width: 5%;
height: 20px;
}
.myslider:hover {
opacity: 1;
}
</style>
<body>
<h1>Example of Range Slider Using Javascript</h1>
<p>Use the slider to increment or decrement value.</p>
<div class = "rangeslider">
<input type = "range" min = "1" max = "100" value = "10"
class = "myslider" id = "sliderRange">
<p>Value: <span id = "demo"></span></p>
</div>
<script>
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("demo");
output.innerHTML = rangeslider.value;
rangeslider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html>输出如下：
