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

网页上使用范围滑块允许用户指定一个数值，该数值必须不小于给定值，且不大于另一个给定值。也就是说，它允许从表示为滑块的范围中选择值。
范围滑块通常使用滑块或拨号控件表示，而不是像“数字”输入类型那样的文本输入框。当不需要输入确切的数值时使用它。例如，flipkart.com 上产品列表过滤器菜单中的价格滑块

创建范围滑块

我们可以按照以下步骤使用简单的 HTML 和 JavaScript 创建一个范围滑块：第 1 步：创建一个 HTML 元素。
在此步骤中使用“div”元素定义滑块元素，其下是一个输入字段，其范围定义在 1 到 100 之间。

第 2 步：将 CSS 添加到滑块元素。

1. 定义外部容器的宽度。

   .rangeslider{
       width: 50%;
       }
   

2. 为滑块定义 CSS，如滑块的高度、宽度、背景、不透明度等。

   .myslider {
       -webkit-appearance: none;
       background: #FCF3CF  ;
       width: 50%;
       height: 20px;
       opacity: 2;
      }
   

3. 添加鼠标悬停效果。

   .myslider:hover {
       opacity: 1;
   }
   

4. 为浏览器添加 WebKit 以更改范围滑块的默认外观。

   .myslider::-webkit-slider-thumb {
       -webkit-appearance: none;
       cursor: pointer;
       background: #34495E  ;
       width: 5%;
       height: 20px;
   }
   

第 3 步：将 JavaScript 添加到滑块元素。
添加以下 JavaScript 代码以显示默认滑块值。

var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("demo");
output.innerHTML = rangeslider.value;

rangeslider.oninput = function() {
  output.innerHTML = this.value;
}

步骤4：组合以上元素。

  
.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;
}
  


  
Example of Range Slider Using Javascript
Use the slider to increment or decrement value.
  

  
  Value: 

  

var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("demo");
output.innerHTML = rangeslider.value;
  
rangeslider.oninput = function() {
  output.innerHTML = this.value;
}

  

输出：