范围滑块是 HTML 中的输入字段，接受“范围”类型。它用于选择给定特定范围内的数值，我们可以在输入字段内传递范围，如下代码片段所示

正如您在上面的代码片段中看到的，类型等于范围，我们提供min =“0”和max =“100”值，这将是字段的范围。

自定义范围滑块可帮助根据需要自定义字段范围。

在下面的文章中，让我们了解如何使用 CSS 和 JavaScript 创建自定义范围滑块。

立即学习“Java免费学习笔记（深入）”；

让我们为每种语言创建单独的文件 -

使用 oninput() 事件

oninput 事件是一个 HTML 事件，用于当用户在输入字段中输入值时立即执行操作。以下是使用此事件的代码片段 -

以下是对下面代码的解释 -

HTML 文件(index.html)

这是 HTML 文件，必须以 .html 扩展名保存。在此文件中，我们将创建一个输入范围字段，这将是我们的自定义范围滑块，在输入字段内我们将设置范围。并创建一个 span 标记来显示自定义范围滑块值。

以下是HTML代码

index.html

   
   


   
Custom Range Sliders with HTML, CSS and JavaScript
   

      
Custom Range Slider: 
      

      
   

CSS文件(style.css)

这是使用 .css 扩展名创建的 CSS 文件。使用 CSS，我们将管理 HTML 页面的样式。

以下是连接 CSS 文件与 HTML 文件的代码片段 -

以下是 CSS 代码 -

样式.css

span{
   position: relative;
   top: 20px;
   left: 20px;
   font-size: 30px;
   font-weight: 700;
}

p{
   position: relative;
   left: 10px;
   font-size: 20px;
}

input[type='range']
{
   -webkit-appearance: none;
   width: 400px;
   height: 30px;
   background-color: black;
   border-radius: 60px;
}

#slider::-webkit-slider-thumb{
   -webkit-appearance: none;
   width: 50px;
   height: 50px;
   border-radius: 40px;
   appearance: none;
   cursor: pointer;
   background-color: blue;
}

JavaScript 文件(index.js)

这是必须使用 .js 扩展名保存的 JavaScript 文件。在JavaScript中，我们将编写一个程序来获取输入范围值并使用innerHTML属性将其显示给用户。

以下是将 JavaScript 文件与 HTML 文件连接起来的代码片段 -

 标签中写入 JavaScript 代码。

下面是JavaScript的程序
index.js

							

								
								

									企业软件介绍主页html模板
									
一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素，那么可以轻松地删除不必要的组件。模板的代码干净，友好，注释良好。这使得编辑和自定义模板变得很容易。
								
								下载 
							
						
 function Range() {
   //fetch the input range value through its id
   let range_value = document.getElementById('slider');
   //fetch the span tag through its id
   let result = document.getElementById('res');
   //show the value using innerHTML property
   res.innerHTML = "Range value is: " + range_value.value;
}

示例
执行上述 HTML、CSS 和 JavaScript。



   
   
   


   
Custom Range Sliders with HTML, CSS and JavaScript
   
   

      
Custom Range Slider: 
      

      
   



正如您在上面的程序中看到的，我们使用 HTML、CSS 和 JavaScript 来创建自定义范围滑块。


使用 HTML，我们创建页面的内容。我们首先创建一个接受范围作为类型的输入字段，并在输入字段内传递等于 1 的最小值和等于 100 的最大值，如下所示 -


稍后，我们创建一个 oninput 事件，如上面的代码片段所示，oninput 事件用于计算输入时的值用户在输入字段中输入值。然后我们通过其 id 获取输入范围值，如下所示 -
let range_value = document.getElementById('slider');

我们获取span标签并通过innerHTML属性，我们显示范围滑块值，如下所示 -
res.innerHTML = "Range value is: " + range_value.value;

使用 onclick() 事件
onclick() 事件是一个 HTML 事件，用于在用户单击特定按钮时执行操作。以下是使用 onclick 事件的代码片段


以下是创建自定义范围滑块的程序
以下是HTML代码
index.html



   
   


   
Custom Range Sliders with HTML, CSS and JavaScript
   

      
Custom Range Slider: 
      

      Calulate Range
      
   



以下是CSS代码
样式.css
span{ position: relative;
      top: 35px;
      left: 40px;
      font-size: 30px;
      font-weight: 700;
}

p{
   position: relative;
   left: 10px;
   font-size: 20px;
}

input[type='range']
{
   -webkit-appearance: none;
   width: 400px;
   height: 30px;
   background-color: yellow;
   border-radius: 60px;
}

#slider::-webkit-slider-thumb{
   -webkit-appearance: none;
   width: 50px;
   height: 50px;
   border-radius: 40px;
   appearance: none;
   cursor: pointer;
   background-color: red;
}

button{
   width: 150px;
   height: 40px;
   background-color: blue;
   color: white;
   border: none;
   cursor: pointer;
   position: relative;
   left: 20px;
   top: 30px;
   transition: 0.5s;
   border-radius: 5px;
}

button:hover{
   opacity: 0.7;
}

以下是JavaScript程序
index.js
let btn = document.getElementById('btn');
btn.onclick = function() {
   //fetch the input range value through its id
   let range_value = document.getElementById('slider');

   //fetch the span tag through its id
   let result = document.getElementById('res');
         
   //show the value using innerHTML property
   res.innerHTML = "Range value is: " + range_value.value;
}

示例
执行上述 HTML、CSS 和 JavaScript。



   
   
   


   
Custom Range Sliders with HTML, CSS and JavaScript
   
   

      
Custom Range Slider: 
      

      Calulate Range
      
   



在上面的程序中，我们使用了 HTML、CSS 和 JavaScript，在 HTML 中我们创建一个接受类型作为范围的输入字段，然后创建一个 HTML 按钮（计算范围），然后我们创建一个span标签来显示范围值。


在 CSS 文件中，我们管理页面的样式。在 JavaScript 中，我们通过 id 获取 HTML 按钮，然后使用 onclick 事件，如下所示 -
let btn = document.getElementById('btn');
btn.onclick = function(){}

然后在函数内部，当用户单击按钮时，我们获取输入范围并使用innerHTML 属性显示值。