帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

CSS3自定义范围滑块特效代码

帝国模板之家 2020-11-09 网页特效 评论

这是一款使用纯css实现的范围滑块特效,能够标记刻度、最小/最大值,支持范围输入浮动标签,可以通过CSS变量进行定制。

使用方法:

1.在html页面中导入css样式文件。

<link rel="stylesheet" href="ui-range.css" />

2.使用以下CSS变量创建自定义范围滑块:

// defaults
--primaryColor: #0366D6;
--value-active-color: white;
--value-background: white;
--value-font: 700 12px/1 Arial;
--progress-color: #EEE;
--progress-shadow: 2px 2px 4px rgba(0,0,0, .1) inset;
--fill-color: var(--primaryColor);
--thumb-size: 16px;
--track-height: calc(var(--thumb-size)/2);
--thumb-shadow: 0 0 3px rgba(0,0,0,.2);
--ticks-thickness: 1px;
--ticks-height: 5px;
--ticks-color: silver;
--step: 1;
--ticks-count: (var(--max) - var(--min)) / var(--step);
--maxTicksAllowed: 30;
--too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
--x-step: Max( var(--step), var(--too-many-ticks) * (var(--max) - var(--min)) ); // manipulate the number of steps if too many ticks exist, so there would only be 2
--tickInterval: 100/((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
--tickIntervalPerc: calc((100% - var(--thumb-size))/( (var(--max) - var(--min)) / var(--x-step) ) * var(--tickEvery, 1));
--completed: calc((var(--value) - var(--min) ) / (var(--max) - var(--min)) * 100);
--LTR: 1;

<div class="range" style='--min:0; --max:1000; --value:170; --text-value:"170"; --thumb-size: 22px; --track-height: calc(var(--thumb-size)/3);'>
  <input type="range" min="0" max="1000" value="170" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))">
  <output></output>
  <div class='range__progress'></div>
</div>

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言