使用JavaScript在HTML中创建范围滑块

网页上使用范围滑杆来允许用户指定一个数值, 该数值必须不小于给定值, 并且不得大于另一个给定值。即, 它允许从表示为滑块的范围中选择值。
范围滑块通常使用滑块或拨号控件而不是像"数字"输入类型这样的文本输入框来表示。当不需要输入确切的数值时使用。例如, flipkart.com上产品列表过滤器菜单中的价格滑块
创建范围滑块
我们可以按照以下步骤使用简单的HTML和JavaScript创建范围滑块：
第1步：
创建一个HTML元素。
在此步骤中, 使用" div"元素定义滑块元素, 在其下面是一个输入字段, 其范围定义为1到100。

< div class = "rangeslider"> < input type = "range" min = "1" max = "100" value = "https://www.lsbin.com/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 = "https://www.lsbin.com/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>

【使用JavaScript在HTML中创建范围滑块】输出如下：