范围滑块是 HTML 中的输入字段，接受“范围”类型。它用于选择给定特定范围内的数值，我们可以在输入字段内传递范围，如下代码片段所示
<input type = “range” min = “0” max = “100”/>
正如您在上面的代码片段中看到的，类型等于范围，我们提供min =“0”和max =“100”值，这将是字段的范围。
自定义范围滑块可帮助根据需要自定义字段范围。
在下面的文章中，让我们了解如何使用 CSS 和 JavaScript 创建自定义范围滑块。
让我们为每种语言创建单独的文件 -
使用 oninput() 事件
oninput 事件是一个 HTML 事件，用于当用户在输入字段中输入值时立即执行操作。以下是使用此事件的代码片段 -
<input type = ‘’ oninput = ‘event name()’>
以下是对下面代码的解释 -
HTML 文件(index.html)
这是 HTML 文件，必须以 .html 扩展名保存。在此文件中，我们将创建一个输入范围字段，这将是我们的自定义范围滑块，在输入字段内我们将设置范围。并创建一个 span 标记来显示自定义范围滑块值。
以下是HTML代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom range Sliders</title>
</head>
<body>
<h1 id="Custom-Range-Sliders-with-HTML-CSS-and-JavaScript">Custom Range Sliders with HTML, CSS and JavaScript</h1>
<div class="sliders">
<p>Custom Range Slider: </p>
<input type="range" min = "1" max = "100" oninput="Range()" id = 'slider' title = 'range'><br>
<span id = 'res'></span>
</div>
</body>
</html>
CSS文件(style.css)
这是使用 .css 扩展名创建的 CSS 文件。使用 CSS，我们将管理 HTML 页面的样式。
以下是连接 CSS 文件与 HTML 文件的代码片段 -
<link rel="stylesheet" href="index.css">
以下是 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 文件连接起来的代码片段 -
<script src = ‘index.html’>
注意 - 您可以仅创建一个带有 .html 的 HTML 文件，而不是为 HTML、CCS 和 JavaScript 创建三个单独的文件扩展名，并在 body 标签上方的 标签中写入 CSS 代码，在 body 标签末尾或 head 标签内的 <script></script> 标签中写入 JavaScript 代码。
下面是JavaScript的程序
index.js
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。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom range Sliders</title>
<style>
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;
}
</style>
</head>
<body>
<h1 id="Custom-Range-Sliders-with-HTML-CSS-and-JavaScript">Custom Range Sliders with HTML, CSS and JavaScript</h1>
<script>
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;
}
</script>
<div class="sliders">
<p>Custom Range Slider: </p>
<input type="range" min = "1" max = "100" oninput="Range()" id = 'slider' title = 'range'><br>
<span id = 'res'></span>
</div>
</body>
</html>
正如您在上面的程序中看到的，我们使用 HTML、CSS 和 JavaScript 来创建自定义范围滑块。
使用 HTML，我们创建页面的内容。我们首先创建一个接受范围作为类型的输入字段，并在输入字段内传递等于 1 的最小值和等于 100 的最大值，如下所示 -
<input type = ‘range’ min = ‘1’ max = ‘100’ oninput = ‘eventname()’>
稍后，我们创建一个 oninput 事件，如上面的代码片段所示，oninput 事件用于计算输入时的值用户在输入字段中输入值。然后我们通过其 id 获取输入范围值，如下所示 -
let range_value = document.getElementById('slider');
我们获取span标签并通过innerHTML属性，我们显示范围滑块值，如下所示 -
res.innerHTML = "Range value is: " + range_value.value;
使用 onclick() 事件
onclick() 事件是一个 HTML 事件，用于在用户单击特定按钮时执行操作。以下是使用 onclick 事件的代码片段
<button onclick = ‘event_name()’>
以下是创建自定义范围滑块的程序
以下是HTML代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom range Sliders</title>
</head>
<body>
<h2 id="Custom-Range-Sliders-with-HTML-CSS-and-JavaScript">Custom Range Sliders with HTML, CSS and JavaScript</h2>
<div class="sliders">
<p>Custom Range Slider: </p>
<input type="range" min = "1" max = "100" id = 'slider' title = 'range'><br>
<button id = 'btn'>Calulate Range</button>
<span id = 'res'></span>
</div>
</body>
</html>
以下是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 Custom Range Sliders with HTML, CSS and JavaScript
<script> 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; } </script>
在上面的程序中，我们使用了 HTML、CSS 和 JavaScript，在 HTML 中我们创建一个接受类型作为范围的输入字段，然后创建一个 HTML 按钮（计算范围），然后我们创建一个span标签来显示范围值。
在 CSS 文件中，我们管理页面的样式。在 JavaScript 中，我们通过 id 获取 HTML 按钮，然后使用 onclick 事件，如下所示 -
let btn = document.getElementById('btn');
btn.onclick = function(){}
然后在函数内部，当用户单击按钮时，我们获取输入范围并使用innerHTML 属性显示值。
以上是如何使用 CSS 和 JavaScript 创建自定义范围滑块？的详细内容。更多信息请关注PHP中文网其他相关文章！
保证金是什么：40px 100px 120px 80px表示？Apr 28, 2025 pm 05:31 PM文章讨论了CSS保证金属性，特别是“保证金：40px 100px 120px 80px”，其应用程序以及对网页布局的影响。
什么是不同的CSS边框特性？Apr 28, 2025 pm 05:30 PM本文讨论了CSS边境属性，重点是自定义，最佳实践和响应能力。主要论点：边境 - 拉迪乌斯（Border-Radius）对响应式设计最有效。
我们如何在CSS中添加评论？Apr 28, 2025 pm 05:27 PM本文讨论了CSS中评论的使用，详细介绍了单线和多行评论语法。它认为注释可以增强代码可读性，可维护性和协作，但如果无法正确管理，可能会影响网站性能。
我们可以通过几种方式将CSS添加到我们的HTML文件中？Apr 28, 2025 pm 05:24 PM文章讨论了将CSS添加到HTML的三种方法：内联，内部和外部。分析了每种方法对网站性能和适合初学者的适用性的影响。（159个字符）
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
Atom编辑器mac版下载
最流行的的开源编辑器
记事本++7.3.1
好用且免费的代码编辑器
Dreamweaver Mac版
视觉化网页开发工具
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
