范围滑块是 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中文网其他相关文章!

这是我们在形式可访问性上进行的小型系列中的第三篇文章。如果您错过了第二篇文章,请查看“以:focus-visible的管理用户焦点”。在

CSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例,以及我们必须将这些样式应用于WordPress块和元素的选项。

Svelte Transition API提供了一种使组件输入或离开文档(包括自定义Svelte Transitions)时动画组件的方法。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

SublimeText3 英文版
推荐:为Win版本,支持代码提示!

禅工作室 13.0.1
功能强大的PHP集成开发环境