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样式更改,模拟滑块的更多相关文章

  1. input range样式优化

    首先HTML代码: <input id="snrPollInterval" type="range" min="1" max=&quo ...

  2. 【转】自定义(滑动条)input[type="range"]样式

    1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome:  ...

  3. [js开源组件开发]html5标签audio的样式更改

    html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以 ...

  4. input输入样式,动画

    模板描述:input输入样式 动画,有输入框也有搜索框的样式,多种多样,大家根据自己的喜欢来. 找网站SEO教程,网站模板,以及想要建立个人博客的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的 ...

  5. 自定义input file样式

    自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...

  6. input的样式简介

    <input type="text" autocomplete="off" placeholder="" x-webkit-speec ...

  7. Vue获取DOM元素样式 && 样式更改

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...

  8. input:file样式怎样修改

    问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...

  9. 使用input range滑块,控制元素transform rotate旋转样式

    <!DOCTYPE html> <html> <head> </head> <body> <!-- 第一步:设置div旋转对象和inp ...

随机推荐

  1. java 深入技术一

    1. myeclipse和debug调试 1)myeclipse重命名 包和类,方法,字段的重命名 重构,refactor-rename 方法,右键refactor-rename,按回车就重命名 Al ...

  2. TFS二次开发系列:四、TFS二次开发WorkItem添加和修改、保存

    WorkItemStore:表示跟踪与运行 Team Foundation Server的服务器的工作项客户端连接. A.添加工作项 1.首先获得某服务器的WorkItemStore. WorkIte ...

  3. LeetCode之404. Sum of Left Leaves

    ------------------------------------------------------------------- 分两种情况: 1.当前节点拥有左孩子并且左孩子是叶子节点:左孩子 ...

  4. Jmeter连接Mysql

    1.下载连接mysql数据库jar包,地址:http://files.cnblogs.com/files/xiaoxitest/mysql-connector-java-5.1.28.zip(因不支持 ...

  5. 四种常见的App弹窗设计,你有仔细注意观察吗?

    弹窗又称为对话框,是App与用户进行交互的常见方式之一.弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应.模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其 ...

  6. <转>SQL Server返回最后一个标识值的三个函数:IDENT_CURRENT、@@IDENTITY、SCOPE_IDENTITY

    MSDN对官方解释:这三个函数都返回最后生成的标识值. 但是,上述每个函数中定义的“最后”的作用域和会话有所不同. 1.IDENT_CURRENT 返回为某个会话和当前作用域中的指定表生成的最新标识值 ...

  7. Linux 第04天

    Linux 第04天 1.系统设置工具(网络和打印机)和硬件检测 1.1 setup工具 1.1.1 用户身份验证设置 1.1.2 网络配置 1.1.3 防火墙设置 1.1.4 键盘形式设置 1.1. ...

  8. 关于在程序中 文件新生成 在用os.system()程序对新生成的文件处理 举个栗子 如下:

    print 'save to ',savedir+os.sep+d["FILE_NAME"]                ff = open(savedir+os.sep+d[& ...

  9. vs发布的程序不依赖运行时库msvcp100.dll

      [摘要:msvcr100.dll:MS Visual C Runtime 100 msvcp100.dll:MS Visual CPp 100 vs建立的工程,运转时库的范例有MD(MDd)战MT ...

  10. 关于Openlayer3的菜鸟认识

    什么是OpenLayers? OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问.从OpenLayers2.2版本以后,O ...