如何将我的标记放置在始终跟随滑块的位置？

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

Youc可以使用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>