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

【问题标题】：How to POSITION my Marker to Always Follow the Slider-Handle?如何定位我的标记以始终跟随滑块手柄？
【发布时间】：2019-04-11 19:26:15
【问题描述】：

我目前正在学习 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>

【问题讨论】：

你的JS在哪里？您能否发布您尝试过的完整示例？这将帮助我们尝试找到解决方案:)
到目前为止您显示的代码甚至无法重现您的图像显示的内容。因此，我们不知道您如何实现任何功能、滑块如何移动等 - 因此我们也无法回答您的问题。因此，请从您目前拥有的正确 minimal reproducible example 开始。

标签： javascript jquery html css

【解决方案1】：

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

See fiddle

//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>

【讨论】：