HTML5新特性——自定义滑动条(input[type="range"])
HTML 4.01 与 HTML5之间的差异
以下 input 的 type属性值是 HTML5 中新增的:
color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。
input的type属性
设置input的type="range"
即可得到滑动条控件,如下:
<input id="range" type="range" value="5" onchange="changeV()">
const range = document.getElementById('range');
function changeV() {
console.log(range.value);
}
滑动条对应属性
- max - 规定允许的最大值。
- min - 规定允许的最小值。
- step - 规定合法数字间隔。
- value - 规定默认值。
下面我们来使用一下上面的各个属性(示例:通过滑动条控制元素大小):
<input type="range" id="range" value="20" min="0" max="200" step="1" onchange="changeV()">
<div class="box"></div>
<script>
const range = document.getElementById('range');
function changeV() {
const boxL = parseInt(range.value);
console.log(boxL);
const box = document.getElementsByClassName('box')[0];
box.style.width = boxL + 'px';
box.style.height = boxL + 'px';
}
</script>
示例中:
- min - 0
- max - 200
- step - 1
- value - 20
对应初始样式如下:
滑动滑动条后的gif图如下:
如何让滑动条控件更加好看
先看两个不同效果示例图:
上面两个红色框中的滑动条明显比默认样式好看很多,那么它们是如何实现的呢,接下来我们讲实现过程:
两个不同样式滑动条的实现过程
这里把对应滑动条的相关代码贴出来:
<p>周期</p>
<input type="range" id="dur" value="0.50" min="0" max="1.00" step="0.01" onchange="changeV()">
<p>速度</p>
<input type="range" id="speed" value="0" min="0" max="5" step="0.01" onchange="changeV()">
/* 这里不考虑浏览器的兼容性 */
#control input[type="range"] {
width: 100%;
-webkit-appearance: none;
height: 8px;
border-radius: 4px;
background: -webkit-linear-gradient(#ffa200, #ffa200) no-repeat white;
background-size: 50% 100%; /* 因为周期默认value=0.50正好占50% */
}
/* -webkit-slider-thumb仅对谷歌浏览器有效 */
#control input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #aaa;
width: 8px;
height: 20px;
border-radius: 4px;
cursor: pointer;
}
#control input[type="range"]::-webkit-slider-thumb:hover {
background: #666;
}
/* 左侧渐变色的写法,默认滑块在最左侧所以下面white为0% */
#control #speed {
background: linear-gradient(to right, #ffa200, white 0%, white);
background-size: 100% 100%;
}
const duration = document.getElementById('dur');
const speed = document.getElementById('speed');
function changeV() {
durVal = parseFloat(duration.value);
spdVal = parseFloat(speed.value);
const durationPercent = parseFloat(durVal, 2) * 100
const speedPercent = parseFloat((spdVal / 5), 2) * 100
duration.style.backgroundSize = `${durationPercent}%, 100%`
speed.style.background = `linear-gradient(to right, #ffa200, white ${speedPercent}%, white`
};
相信大家结合代码可以清晰的掌握两种滑动条的实现方法,这里就不过多解释了
gif效果局部展示:
文章中用到的示例演示地址
写在最后
前端是一个庞大的体系,很多知识在没用到的时候也许我们根本不知道它多有用。就比如文中的滑动条,工作中很难碰到,一旦要用的时候我们还得去琢磨一番,这里通过自己的讲解相信可以让需要的人更好的使用滑动条功能,如果觉得本文对你有所帮助不妨点个赞再走吧,谢谢啦!
HTML5新特性——自定义滑动条(input[type="range"])的更多相关文章
- 【转】自定义(滑动条)input[type="range"]样式
1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome: ...
- H5滑条(input type=range)
input[type=range] { -webkit-appearance: none; width: 230px; border-radius: 10px; /*这个属性设置使填充进度条时的图形为 ...
- ajax利用html5新特性带进度条上传文件
http://blog.csdn.net/pkgray/article/details/27591283 http://www.matlus.com/html5-file-upload-with-pr ...
- input type=range 进度条的自定义样式
/* 自定义进度条样式 */ .v_my input[type=range] { -webkit-appearance: none;/*清除系统默认样式*/ width: .8rem; backgro ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- 第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
随机推荐
- postgres centos 创建数据库 创建用户
一个小的流程关于如何创建数据库和用户,用以加强印象,以及留档备份 一.创建账户 1.登录postgres账户 su postgres 2.进入psql 指令 psql 3.创建用户 create US ...
- 使用hutool进行二维码制作
2.在IDEA中使用代码块生成二维码
- linux用户组相关,密码相关,文件操作,和启动级别
一.开机重启和用户切换 注意,当关机或重启前,都应当先执行一下sync指令,把内存的数据写入磁盘,防止数据丢失. shutdown命令 shutdown -h now :立即关机 shutdown - ...
- 邹传伟:对人民银行DC/EP的初步分析
http://opinion.caixin.com/2019-11-01/101477903.html [财新网](专栏作家 邹传伟)2019年10月24日,习总书记在中央政治局第十八次集体学习中指出 ...
- react后台项目开发(一)
1. 项目开发准备 描述项目 技术选型 api 接口(4部分:3请求{url,请求方式,请求参数格式}, 1响应数据格式)/ 接口文档/ 测试接口 2. 启动项目开发 使用react脚手架创建项目 开 ...
- Java面试题和解答(五)
1.在Java中Executor和Executors的区别? Executor是线程池的顶层接口,它的实现类如下图所示: Executors是一个类,提供了多个静态方法,用于生成不同类型的线程池,如下 ...
- python frozenset
1. 一旦初始化,并不可以改变 2. 可以作为字典的键值
- JMeter内存溢出:java.lang.OutOfMemoryError: Java heap space解决方法
一.问题原因 用JMeter压测,有时候当模拟并发请求较大或者脚本运行时间较长时,JMeter会停止,报OOM(内存溢出)错误. 原因是JMeter是一个纯Java开发的工具,内存由java虚拟机JV ...
- Ubuntu Server中怎样卸载keepalived
场景 在Ubuntu Server中进行安装keepalived ,如果安装过程中出现纰漏,想要重新安装keepalived或者就是想直接卸载keepalived. 我们在安装keepalived时指 ...
- Add an Action with Option Selection 添加具有选项选择的按钮
In this lesson, you will learn how to create an Action with support for option selection. A new View ...