HTML滑动条自动滑动 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"即可得到滑动条控件，如下：

const range = document.getElementById('range');

function changeV() {

console.log(range.value);

}

滑动条对应属性

max - 规定允许的最大值。

min - 规定允许的最小值。

step - 规定合法数字间隔。

value - 规定默认值。

下面我们来使用一下上面的各个属性(示例：通过滑动条控制元素大小)：

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';

}

示例中：

min - 0

max - 200

step - 1

value - 20

对应初始样式如下：

滑动滑动条后的gif图如下：

如何让滑动条控件更加好看

先看两个不同效果示例图：

上面两个红色框中的滑动条明显比默认样式好看很多，那么它们是如何实现的呢，接下来我们讲实现过程：

两个不同样式滑动条的实现过程

这里把对应滑动条的相关代码贴出来：

周期

速度

/* 这里不考虑浏览器的兼容性 */

#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效果局部展示：

文章中用到的示例演示地址

写在最后

前端是一个庞大的体系，很多知识在没用到的时候也许我们根本不知道它多有用。就比如文中的滑动条，工作中很难碰到，一旦要用的时候我们还得去琢磨一番，这里通过自己的讲解相信可以让需要的人更好的使用滑动条功能，如果觉得本文对你有所帮助不妨点个赞再走吧，谢谢啦！

H5滑条(input type=range)

input[type=range] { -webkit-appearance: none; width: 230px; border-radius: 10px; /*这个属性设置使填充进度条时的图形为 ...

ajax利用html5新特性带进度条上传文件

/pkgray/article/details/27591283 /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被极大的简化. 同时字符集声明也被简化了:

随机推荐

node.js cluster多进程、负载均衡和平滑重启

1 cluster多进程 cluster经过好几代的发展,现在已经比较好使了.利用cluster,可以自动完成子进程worker分配request的事情,就不再需要自己写代码在master进程中rob ...

集合框架学习笔记<二>

1.什么是ArrayList ArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了如下一些好处: 动态的增加和减少元素 实现了ICollection和ILis ...

Java [Leetcode 328]Odd Even Linked List

题目描述: Given a singly linked list, group all odd nodes together followed by the even nodes. Please no ...

Ubuntu 误改/etc/sudoers 文件权限

添加用户时不小心修改了/etc/sudoers 权限,结果不能sudo了,Ubuntu默认关闭root帐户,结果傻X了,无法改回了. 方法如下: 1.重启机器,开机按ESC,进入恢复模式 2.此时,磁 ...

【集合框架】JDK1.8源码分析之ArrayList详解(一)

[集合框架]JDK1.8源码分析之ArrayList详解(一) 一. 从ArrayList字表面推测 ArrayList类的命名是由Array和List单词组合而成,Array的中文意思是数组,Lis ...

翻译：group_concat()函数(已提交到MariaDB官方手册)

本文为mariadb官方手册:group_concat()函数的译文. 原文:/kb/en/group_concat/ 我提交到MariaDB官方手册的译文:ht ...

[Objective-C]编程艺术 笔记整理

看了,发现不少平时不注意的或注意但没有系统总结的东西,特此记录一下. 这次没有整理完,后续更新会结合手里的一些其他资料整理. 新博客wossone ...

【Teradata Utility】系统工具使用

List two ways in which a system utility can be started. Explain how to use the following utilities t ...

VS应用NuGet

一.什么是Nuget Nuget是 ASP .NET Gallery 的一员.NuGet 是免费.开源的包管理开发工具,专注于在 .NET 应用开发过程中,简单地合并第三方的组件库. 当需要分享开发的 ...