如何定位我的标记以始终跟随滑块手柄？

Question

我目前正在学习 CSS 和 JS 布局。 如何让我的 MARKER 始终跟随 SLIDER-HANDLE（光标）移动，就像它们被分组为一个一样？

 .slider { -webkit-appearance: none; /* Override default CSS styles */ appearance: none; width: 100%; /* Full-width */ height: 25px; /* Specified height */ background: #d3d3d3; /* Grey background */ outline: none; /* Remove outline */ opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ -webkit-transition: .2s; /* 0.2 seconds transition on hover */ transition: opacity .2s; } .sliderticks p { position: relative; display: flex; justify-content: center; text-align: center; width: 1px; background: #D3D3D3; height: 10px; line-height: 40px; margin: 0 0 20px 0; }

 <form> <div class='slidecontainer' > <div class='sliderticks'> </div> </div> <div class='add-queston-btn'> <img src='Images\\pointmarker.png' data-quiz-number='2' z-index='2'> </div> </form>

Answer 1

您可以使用 Jquery 设置图像的位置

见小提琴

 //set a begining position to img var slider = $(".slider")[0]; var sliderPos = slider.value / slider.max; var pixelPostion = slider.clientWidth * sliderPos; $(".img").css("left",pixelPostion-7 + "px"); //set a position to img when slide move $(document).on('input', '.slider', function() { var slider = $(".slider")[0]; var sliderPos = slider.value / slider.max; var pixelPostion = slider.clientWidth * sliderPos; $(".img").css("left",pixelPostion-5 + "px"); });

 .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 100%; height: 25px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; background: red; } .img{ width: 30px; height: 30px; background-image: url("https://i.stack.imgur.com/xAPBs.png"); background-size: 30px 30px; position:absolute; left:50px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider"/> <div class="img"></div> </div>