网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款使用纯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>
转载请注明来源:CSS3自定义范围滑块特效代码
本文永久链接地址:https://www.moyouyouw.cn/code/686.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论