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

2021年5月11日14:38:08 发表评论 2,143 次浏览

网页上使用范围滑杆来允许用户指定一个数值, 该数值必须不小于给定值, 并且不得大于另一个给定值。即, 它允许从表示为滑块的范围中选择值。

范围滑块通常使用滑块或拨号控件而不是像"数字"输入类型这样的文本输入框来表示。当不需要输入确切的数值时使用。例如, 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>

输出如下:


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: