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

演示  website 下载

这是一款使用纯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>

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