代码之家 › 专栏 › 技术社区 › noogui

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

css3 css html jquery javascript

-6

noogui · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

××× × ×××× 7 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

11 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

11 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

11 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

11 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

11 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

12 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

12 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

12 月前