Input type="range"的滑动条

最新推荐文章于 2023-02-23 11:03:52 发布
最新推荐文章于 2023-02-23 11:03:52 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： H5 文章标签： input type="range" 滑动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41288457/article/details/79294465
版权

网上查了很多关于滑动条的资料，大部分是讲述画一个没有刻度的滑动条。特地在国外技术论坛找到的添加刻度方法，具体使用方法如下：

1. 为input添加list="tickmarks"的属性

2. 增加datalist包option的节点，若要显示刻度，给option增加label属性

3. 通过js方法获取input表单的value值赋予指定节点

不同浏览器实现效果会有差异，可通过修改默认属性统一滑动条样式。虽然实现过程比较简单，但由于该技术使用频率较低，相关资料较少，特以此篇博客献给广大技术朋友，具体代码如下（chrome效果图）:


<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    input[type=range] {
  width: 500px;
  border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
#tickmarks{
  width: 515px;
  display: flex;
  position: relative;
  left: -6px;
}
#tickmarks option{
    width: 25px;
    display: inline-block;
    font-size: 10px;
    text-align: center;
}
.volume,.daily{
  display: inline-block;
  position: relative;
  top: -12px;
  margin-left: 20px;
}
.wrapper{
  display: inline-block;
  background: #FFFFE0;
  border: 1px solid #ccc;
  margin: 10px;
}
</style>
</head>
<body>
<div class="swiperBar">
  <div class="wrapper">
    <datalist id="tickmarks">
    <option value="0" label="0">
    <option value="10">
    <option value="20" label="1">
    <option value="30">
    <option value="40" label="2">
    <option value="50">
    <option value="60" label="3">
    <option value="70">
    <option value="80" label="4">
    <option value="90">
    <option value="100" label="5">
    <option value="110">
    <option value="120" label="6">
    <option value="130">
    <option value="140" label="7">
    <option value="150">
    <option value="160" label="8">
    <option value="170">
    <option value="180" label="9">
    <option value="190">
    <option value="200" label="10">
  </datalist>
  <input type="range"  step="5" list="tickmarks" οnchange="showVal(this.value,'volumeBox')">
  </div>
 <div class="volume" style="display: inline-block">
      响度评估:<span id="volumeBox" ></span>
 </div>
</div>
<div class="swiperBar">
  <div class="wrapper">
  <datalist id="tickmarks">
    <option value="0" label="0">
    <option value="10">
    <option value="20" label="1">
    <option value="30">
    <option value="40" label="2">
    <option value="50">
    <option value="60" label="3">
    <option value="70">
    <option value="80" label="4">
    <option value="90">
    <option value="100" label="5">
    <option value="110">
    <option value="120" label="6">
    <option value="130">
    <option value="140" label="7">
    <option value="150">
    <option value="160" label="8">
    <option value="170">
    <option value="180" label="9">
    <option value="190">
    <option value="200" label="10">
  </datalist>
  <input type="range"  step="5" list="tickmarks" οnchange="showVal(this.value,'dailyBox')">
  </div>
   <div class="daily" style="display: inline-block">
        日常影响评估:<span id="dailyBox" ></span>
   </div>
</div>  
</body>
<script>
function showVal(newVal,id){
  document.getElementById(id).innerHTML=newVal*0.1;
}
</script>
</html>
国民王九蛋
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
有关input控件range属性
weixin_53332189的博客
04-06 3541
range是H5新增的属性 下面来看一下range的用法： <style> .div1{ width: 200px; height: 200px; border: 1px black solid; } </style> </head> <body> <div class="div1"> </div> <p
html input range修改,HTML input range
weixin_36324916的博客
06-03 597
# HTML input range通过鼠标拖动方式设置值是很方便的操作。将input的type属性值设置为"range"即可创建具有上述功能的控件。此控件是HTML5新增。代码实例如下：```html蒲公英云请选取数字：```代码运行效果截图如下：![](/images/1589648602392.png)此控件属性众多，下面介绍一下它的主要属性：(1).autofocus(HTML5)：规定页...
Input标签type=’range’的使用
weixin_44569835的博客
04-01 1万+
Input标签type=’range’的使用 开发工具与关键技术：VS2015、C#、JS 作者：陈智鸿 撰写时间：2019-02-15 我这次要分享的是，使用input标签的range类型，改变背景颜色。首先准备两个input标签，一个类型是range用来滑动,一个类型是文本用来显示数据用的。给类型是range设置一些样式，id为JK，min最小值，max最大值，value设置为1，如果没有设置...
input[type=“range“]实现手动滑动条效果
m0_49515138的博客
02-23 637
【代码】input[type="range"]实现手动滑动条效果。
input的range类型滑动条的自定义样式设置
祥哥的说
01-05 3507
 完整代码的项目应用--视频播放器中的音量和播放进度滑动条 /* unholy css to style input type="range" */ /*主要是滑动条的自定义样式设置*/ /*去除系统默认的滑动条样式，主要针对基于webkit的浏览器*/ input[type=range] { -webkit-appearance: none; background:transpar...
自定义(滑动条)input[type="range"]样式
热门推荐
清风的博客
06-02 12万+
这是我的第一篇博文，也是我这个小白努力的起点。刚接触JavaScript没多久，如果文中有错误的地方欢迎大家指正，或者给予建议，让我能逐渐向大牛靠拢。今天这篇文章给大家带来的是关于美化Slider Bar的相关内容。Range是HTML5中新出现的滑块控件，也是常见的控件的之一，不过这个控件的原始样式略丑，所以想对它进行一些改造。需要注意的是Internet Explorer 9及更早IE版本并不支
自定义(滑动条)input[type="range"]两个样式
10-08
自定义(滑动条)input[type="range"]样式； 完成以下的五个步骤： 去除系统默认的样式； 给滑动轨道(track)添加样式； 给滑块(thumb)添加样式； 根据滑块所在位置填充进度条； 实现多浏览器兼容。
jQuery操作 input type=checkbox的实现代码
12-12
input type=”checkbox”>: 2012欧洲杯”死亡之组”小组出线的国家队是： <input type=”checkbox” name=”nation” value=”Germany”>德国 <input type=”checkbox” name=”nation” value=”...
定义input type=file 样式的方法
12-14
input type=”file” name=”file” /> 既然这样我们就用一个text和一个button来显示这个file的样式，html代码是这样： 复制代码代码如下: <div class=”file-box”> <form action=”” method=”post” ...
自定义(滑动条)input[type="range"]样式 下载
01-21
对应博客：http://blog.csdn.net/u013347241/article/details/51560290
html5可滑动的文本框,html5 input type="range"实现拖拉滑条功能
weixin_34453486的博客
06-03 2138
本文是最新的html5技术 实现拖拉条功能。实现如下图所示效果 主要功能实现是在拖拉滑动条后，在后台处理textbox中相应的值。但是有的浏览器在拖动滑动条是，textbox里面的值一直变化，会频繁触发textchanged事件(注意jquery 在客户端给textbox赋值是并不会引起回发，即不会触发textchanged事件，需使用jquery 条用change()事件，以引起回发。)下面贴出...
input输入框动态提示，输入框+下拉框（DataList）
ccyy
01-22 5490
要做一个类似于百度搜索框的那种 输入关键字段 可以自动提示 在网上找了好多的例子都试了试。好几个利用jQuery的都不行，没有成功。可是却无意间发现了一个input输入框自动提示神器 DataList DataList的表现很像是一个Select下拉列表，但它只是提示作用，并不限制用户在input输入框里输入什么。 HTML5 Datalist的语法其实跟select下拉列表的语法几乎完全一样，非常的简单！ 设备生产厂家：<input type="text" name="sbsccj" id=""
html5 表单 range 实现显示刻度值
qq_15058425的博客
09-22 2万+
html5新增了input="range",可以通过刻度滑动来赋值。如下可以通过拖动刻度实时显示刻度的值。注意：触发时间为oninput                     function change(){        var num=document.getElementById("range");        var location=docu
html5中新增的表单控件 input datalist
qq_14993591的博客
06-26 411
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form act.
Input标签新增的属性&Range调背景色
小头Sophia
12-23 6980
1.HTML5中input标签新增加的属性：（不同的浏览器显示的效果会不一样） 1）email 2)date 3)url 4)color 5)number 6)range 7)optgroup 8）datalist 示例代码如下： 邮箱:type="email"> 日期:type="date"> 链接:type="url"> 颜色:type
input 新属性type="range"
Bright2017的博客
04-22 4761
因为之前写了一个模拟的音乐播放器，所以对这个input的新属性稍微关注了一下，功能还是很强大的。type="range" 直接显示一个滑块控件，可拖动。不过很多时候这个样式不太能满足我们项目的需求，所以这里可以适当调整一下。修改前样式：修改后样式：作为一个拿来主义者，代码给你们：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta ...
让input标签的range属性显示数值
点滴记忆
10-10 4492
<input type = "range" name = "salary" max = "20" min = "15" onchange="document.getElementById('show').innerHTML=value"> <span id="show"></span>
range显示当前刻度_html5 表單 range 實現顯示刻度值
weixin_42462474的博客
01-30 411
1. onchange事件與onpropertychange事件的區別：onchange事件在內容改變(兩次內容有可能相等)且失去焦點時觸發；onpropertychange事件是實時觸發，每增加或刪除一個字符就會觸發，通過js改變也會觸發該事件，但是該事件是IE專有。2. oninput事件與onpropertychange事件的區別：oninput事件是IE之外的大多數瀏覽器支持的事件，在va...
range显示当前刻度_深度挖掘，Html5的 Range 滑动刻度的坑，兼容全平台，将任性进行到底！...
weixin_42133899的博客
01-17 371
最近2天一直在弄一个滑动的刻度效果，由于项目是基于Web App开发的，于是考虑到 移动端和pc端的兼容性问题，考虑的比较多，尝试采用 Html5的Range 来做，目前已经兼容 pc端和移动端！实现成果如下：Html5 Range，缺点：-------------------------------------------------------------------------------...
<input type="range">如何修改颜色
最新发布
06-11
input[type="range"]::-webkit-slider-thumb { background-color: red; } ``` 这段代码会将滑动条的拇指颜色修改为红色。您可以根据需要修改颜色值。请注意，这种方法可能不适用于所有浏览器，因为不同浏览器可能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值