一个简单的slider滑块组件
我们先来看一张图片：
要实现这样的效果我们有很多种方法，比如直接使用<input type="range" />修改样式即可，也可用下面的这种方式修改 样式
<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);
}
}
}
//渲染dom
render() {
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）
代码实现还是很简单的，有兴趣的可以点这里，更多基础测试等着你
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
