我们先来看一张图片：

要实现这样的效果我们有很多种方法，比如直接使用<input type="range" />修改样式即可，也可用下面的这种方式修改 样式
HTML代码：

<div class="slider"><button class="slider-track"></button><button class="slider-thumb"></button>
</div>

CSS 样式：

.slider {padding: 5px 0;position: relative;margin: 30px 10%;--percent: 0;
}.slider-track {display: block;width: 100%;height: 6px;background-color: lightgray;border: 0;padding: 0;
}.slider-track::before {content: '';display: block;height: 100%;background-color: skyblue;width: calc(1% * var(--percent));
}.slider-thumb {position: absolute;width: 16px;height: 16px;border: 0;padding: 0;background: #fff;box-shadow: 0 0 0 1px skyblue;border-radius: 50%;left: calc(1% * var(--percent));top: 0;margin: auto -8px;
}`

那如何以组件的形式生成一个简单的滑块呢？

JS代码如下：

class Slider {constructor(opts = {}) {this.el = opts.el;this.value = opts.value || 0;this.slider = null;this.render();this.bindEvt();return {val: (value) => {this.val(value);}}}//渲染DOMrender() {const container = document.querySelector(this.el);const slider = document.createElement('div');this.slider = slider;// 有缺省值则赋值if (this.value) {this.val(this.value);}slider.className = "slider";// 轨道无需获取焦点slider.innerHTML = (`<button class="slider-track" tabindex="-1"></button><button class="slider-thumb"></button>`);if (container) {container.appendChild(slider);} else {// 若未指定容器，则在 body 标签最后插入 DOM 结构document.body.appendChild(slider);}}// 监听事件bindEvt() {const {slider} = this;const slider_track = slider.querySelector('.slider-track');const slider_thumb = slider.querySelector('.slider-thumb');let readymMove = false;const startHandle = e => {if (e.target === slider_thumb) {e.stopPropagation();readymMove = true;}}const moveHandle = e => {if (readymMove) {this.computeVal(e);}}const endHandle = () => {readymMove = false};slider.addEventListener('click', e => {if (e.target == slider_track) {this.computeVal(e);}}, false)slider.addEventListener('keydown', evt => {if (document.activeElement === slider_thumb) {let value = this.val();evt = (evt) ? evt : ((window.event) ? window.event : ""); //兼容IE和Firefox获得keyBoardEvent对象  var keyCode = evt.keyCode ? evt.keyCode : evt.which; //兼容IE和Firefox获得keyBoardEvent对象的键值  switch (keyCode) {//左箭头case 37:value--;break;//右箭头case 39:value++;break;}}this.val(value);}, false)// 开始拖动slider.addEventListener('touchstart', startHandle);slider.addEventListener('mousedown', startHandle);// 拖动中window.addEventListener('touchmove', moveHandle);window.addEventListener('mousemove', moveHandle);// 拖动结束window.addEventListener('touchend', endHandle);window.addEventListener('mouseup', endHandle);}// 计算当前值computeVal(e) {const {width, left} = this.slider.getBoundingClientRect();let posX = e.pageX;if (e.touches) { // 兼容移动端posx = e.touches[0].pageX;}this.val((posX - left) / width * 100);}// 赋值 & 取值val(value) {if (typeof value === 'undefined') {// 返回当前 slider 的 percent 值return this.slider.style.getPropertyValue('--percent').trim() || 0;}if (isNaN(value)) { // 过滤非法字符return;}if (value < 0) {value = 0;} else if (value > 100) {value = 1000;}this.slider.style.setProperty('--percent', value);}
}

使用方式：

let myslider1 = new Slider({ el: '#box' });  // 指定容器
new Slider({ value: 50 });  // 缺省赋值
myslider1.val(value);  // js 动态赋值
or
new Slider();  // 无参数（插入到 body 标签最后，赋值为 0）

代码实现还是很简单的，有兴趣的可以点这里，更多基础测试等着你