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

努吉

在此处输入图片说明

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


    

利夫尼马尔卡

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章