input range样式更改,模拟滑块
input range 样式更改,js模拟滑块实时更新数据。
效果图:
html 代码:
<div>
<span class="slider"></span>
<span class="lightgray"></span>
<input type="range" min="0" max="5" step="0.1" value="0">
<span class="value"><span class="min">0</span>-5</span>
</div>
css 代码:
div{
position: relative;
}
input[type=range] {
-webkit-appearance: none; /* 隐藏滑块,以便自定义滑块样式 */
width: 120px;
border: none;
position: absolute;
background: transparent;
z-index: 3;
top: 20px;
&:before {
content: attr(min);
padding-right: 5px;
}
&:after {
content: attr(max);
padding-left: 5px;
}
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* 去掉默认蓝色边框 */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent; /* 隐藏滑块,以便自定义滑块样式 */
border-color: transparent;
color: transparent;
}
/* 设定WebKit浏览器下range */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 10px;
width: 10px;
border-radius: 100%;
background: orange;
cursor: pointer;
margin-top: -2px;
margin-left: -1px;
}
/* Firefox下 */
input[type=range]::-moz-range-thumb {
height: 10px;
width: 10px;
border-radius: 100%;
background: orange;
cursor: pointer;
margin-left: -1px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
}
input[type=range]::-ms-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
.lightgray {
position: absolute;
top: 22px;
left: 2px;
height: 6px;
display: inline-block;
background-color: lightgray;
z-index: 2;
}
.slider{
position: absolute;
top: 22px;
left: 2px;
height: 6px;
display: inline-block;
background-color: #ef6683;
width: 118px;
}
.value{
margin-left: 30px;
}
js代码:
$("input").on("mousemove",function(){
var $this = $(this);
var $min = $this.closest('div').find('.value .min');
var value = parseFloat($this.val());
$min.text(value.toFixed(1));
var $lightgray = $this.closest('div').find('.lightgray');
var $slider = $this.closest('div').find('.slider');
var width = $slider.width() / $this.attr('max') * value;
$lightgray.css('width', width);
});
input range样式更改,模拟滑块的更多相关文章
- input range样式优化
首先HTML代码: <input id="snrPollInterval" type="range" min="1" max=&quo ...
- 【转】自定义(滑动条)input[type="range"]样式
1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome: ...
- [js开源组件开发]html5标签audio的样式更改
html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以 ...
- input输入样式,动画
模板描述:input输入样式 动画,有输入框也有搜索框的样式,多种多样,大家根据自己的喜欢来. 找网站SEO教程,网站模板,以及想要建立个人博客的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的 ...
- 自定义input file样式
自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...
- input的样式简介
<input type="text" autocomplete="off" placeholder="" x-webkit-speec ...
- Vue获取DOM元素样式 && 样式更改
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...
- input:file样式怎样修改
问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...
- 使用input range滑块,控制元素transform rotate旋转样式
<!DOCTYPE html> <html> <head> </head> <body> <!-- 第一步:设置div旋转对象和inp ...
随机推荐
- java 深入技术一
1. myeclipse和debug调试 1)myeclipse重命名 包和类,方法,字段的重命名 重构,refactor-rename 方法,右键refactor-rename,按回车就重命名 Al ...
- TFS二次开发系列:四、TFS二次开发WorkItem添加和修改、保存
WorkItemStore:表示跟踪与运行 Team Foundation Server的服务器的工作项客户端连接. A.添加工作项 1.首先获得某服务器的WorkItemStore. WorkIte ...
- LeetCode之404. Sum of Left Leaves
------------------------------------------------------------------- 分两种情况: 1.当前节点拥有左孩子并且左孩子是叶子节点:左孩子 ...
- Jmeter连接Mysql
1.下载连接mysql数据库jar包,地址:http://files.cnblogs.com/files/xiaoxitest/mysql-connector-java-5.1.28.zip(因不支持 ...
- 四种常见的App弹窗设计,你有仔细注意观察吗?
弹窗又称为对话框,是App与用户进行交互的常见方式之一.弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应.模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其 ...
- <转>SQL Server返回最后一个标识值的三个函数:IDENT_CURRENT、@@IDENTITY、SCOPE_IDENTITY
MSDN对官方解释:这三个函数都返回最后生成的标识值. 但是,上述每个函数中定义的“最后”的作用域和会话有所不同. 1.IDENT_CURRENT 返回为某个会话和当前作用域中的指定表生成的最新标识值 ...
- Linux 第04天
Linux 第04天 1.系统设置工具(网络和打印机)和硬件检测 1.1 setup工具 1.1.1 用户身份验证设置 1.1.2 网络配置 1.1.3 防火墙设置 1.1.4 键盘形式设置 1.1. ...
- 关于在程序中 文件新生成 在用os.system()程序对新生成的文件处理 举个栗子 如下:
print 'save to ',savedir+os.sep+d["FILE_NAME"] ff = open(savedir+os.sep+d[& ...
- vs发布的程序不依赖运行时库msvcp100.dll
[摘要:msvcr100.dll:MS Visual C Runtime 100 msvcp100.dll:MS Visual CPp 100 vs建立的工程,运转时库的范例有MD(MDd)战MT ...
- 关于Openlayer3的菜鸟认识
什么是OpenLayers? OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问.从OpenLayers2.2版本以后,O ...