console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.g1cxglch {
width: 100%;
margin-top: 100px;
margin-left: 10%;
}
.g1cxglch .input {
width: 100%;
height: 10px;
background: #ed6302 padding: 0 30px;
}
.g1cxglch>.input>.slider {
box-shadow: 0 0 0 30px rgba(49, 52, 60, .4);
;
width: 800px;
height: 0.625rem;
border-radius: 0.625rem;
background: #ed6302;
position: relative;
}
.g1cxglch>.input>.slider>.slider-inner {
width: 49%;
left: 300px;
height: 10px;
background: #43b309;
}
.g1cxglch>.input>.slider>div {
position: absolute;
}
.g1hur1xx {
--1pb09fw: 0 4px 11px 0 rgba(0, 0, 0, .13);
--g60h3y: url(/assets/tip_w.a52237b5.png);
touch-action: pan-x;
position: absolute;
box-shadow: none;
}
.g1cxglch>.input>.slider>.slider-button {
width: 1.75rem;
height: 1.75rem;
border-radius: 0.375rem;
background: #ffffff;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
top: -0.5625rem;
margin-left: -1.875rem;
cursor: col-resize;
}
.g1cxglch>.input>.slider>.slider-button.center {
height: 1.125rem;
top: -0.25rem;
cursor: pointer;
}
.g1cxglch>.input>.slider>.num-info {
width: 100%;
top: 2.75rem;
display: flex;
}
.g1cxglch>.input>.slider>.num-info>span {
white-space: nowrap;
color: #000;
position: absolute;
}
/* .g1cxglch >.input >.slider >.num-info>span:first-child {
width: 25%;
left: 0;
margin-left: 0;
text-align: left;
flex: 1
} */
.g1cxglch>.input>.slider>.num-info>span:nth-child(1) {
text-align: left;
}
.g1cxglch>.input>.slider>.num-info>span:nth-child(2) {
text-align: centr;
left: 25%;
}
.g1cxglch>.input>.slider>.num-info>span:nth-child(3) {
text-align: centr;
left: 50%;
}
.g1cxglch>.input>.slider>.num-info>span:nth-child(4) {
text-align: centr;
left: 75%;
}
.g1cxglch>.input>.slider>.num-info>span:nth-child(5) {
text-align: right;
left: 98%;
}
.g1hur1xx .num {
position: relative;
width: 100%;
height: 100%;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.g1hur1xx .num .img-sider {
font-size: 0;
height: 12px;
width: auto;
pointer-events: none;
}
.g1hur1xx .num .tips {
position: absolute;
height: 3.5rem;
width: 3.125rem;
opacity: 0;
top: -4.25rem;
left: -0.75rem;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
transform: translate3d(0, 25%, 0);
background: var(--g60h3y) no-repeat center;
background-size: 100% auto;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.g1hur1xx .num .tips span {
margin-top: -0.25rem;
}
</style>
</head>
<body>
<div id="app">
<div class="g1cxglch">
<div class="input">
<div class="slider">
<div class="slider-inner active"></div>
<button class="g1hur1xx slider-button left" style="left: 300px; z-index: 10">
<div class="num">
<img draggable="false" class="img-sider" alt="img" src="/assets/sider.43b9ea10.svg" />
<div class="tips">
<span>3179</span>
</div>
</div>
</button>
<button class="g1hur1xx slider-button center" style="left: 500px; z-index: 9">
<div class="num">
<img draggable="false" class="img-center" alt="img"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAGCAYAAADUtS5UAAAAAXNSR0IArs4c6QAAAH1JREFUKBVjvHr1KtvPnz+bGP7/j2MAAUbGRezs7HXa2tq/wHw0glrqWaCWlsPN//+/HCgG4lbAxZAY1FLPBPcpkuFYxWDysJCB8UE0NjGYPDY5oBgTTJ7eNBMoTjEsxSYGU4RNDpsYAfUsoIQEjlNYkAANAYnB9KHT1FIPAOiAaX72x7l3AAAAAElFTkSuQmCC" />
</div>
</button>
<button class="g1hur1xx slider-button right" style="left: 700px; z-index: 11">
<div class="num">
<img draggable="false" class="img-sider" alt="img" src="/assets/sider.43b9ea10.svg" />
<div class="tips">
<span>7787</span>
</div>
</div>
</button>
<div class="num-info">
<span>0</span>
<span>2500</span>
<span>5000</span>
<span>7500</span>
<span style=" text-align: right;">9999</span>
</div>
</div>
</div>
</div>
</div>
<script>
const leftBtn = document.querySelector('.left')
const rightBtn = document.querySelector('.right')
const centerBtn = document.querySelector('.center')
const slider = document.querySelector('.slider')
const sliderLeft = slider.offsetLeft
const sliderWidth = window.getComputedStyle(slider).width.replace('px', '')
console.log('sliderWidth=',sliderWidth)
let startLeft = 0
let startX = 0
let _MOVE = null
let _UP = null
const down = function (event) {
const left = this.getBoundingClientRect().left + 1
console.log('left=',left)
startX = event.clientX
startLeft = left - sliderLeft
_MOVE = move.bind(this)
_UP = up.bind(this)
window.addEventListener('mousemove', _MOVE)
window.addEventListener('mouseup', _UP)
}
const move = function (event) {
let curLeft = event.clientX - startX + startLeft
if (curLeft > sliderWidth) {
curLeft = sliderWidth
} else if (curLeft < 1) {
curLeft = 1
}
this.style.left = curLeft + 'px'
}
const up = function (event) {
window.removeEventListener('mousemove', _MOVE)
window.removeEventListener('mouseup', _UP)
}
leftBtn.addEventListener('mousedown', down)
rightBtn.addEventListener('mousedown', down)
centerBtn.addEventListener('mousedown', down)
</script>
</body>
</html>