Question

我需要transform: translateX(and_step_to_translate_here)转换到滑块拇指所在的相同位置。我需要以某种方式使用span#a。所以说要容易一点，我需要input {width: 90%;}来跟踪轨迹。我该怎么办？

＆＃13;

<input type="range" min="0" max="100" step="1"/><br/>
<span id="a">I'm following.</span>

＆＃13;

$('.box1,.box2').mouseenter(function () {
    $('.box2').stop().animate({
        top: 0
    }, 'slow');
}).mouseleave(function () {
    $('.box2').stop().animate({
        top: '-200px'
    }, 'slow');
});

＆＃13;

Answer 1

https://jsfiddle.net/2cc83shx/2/

$( document ).ready( function() {
    $( '#rangeInput' ).on( 'change', function() {
        $( '#a' ).css({
            'transform': 'translateX(' + $(this).val() + 'px)'
        })
    })
})

我可以帮助一下。你可以稍后从我的小提琴中定位它。（这里，我使用jquery来选择元素。你也可以使用纯j来做这个）

* UPDATE

如果您希望在拖动范围时遵循，请按照下面的代码

https://jsfiddle.net/2cc83shx/3/

Answer 2

我可以建议使用输入范围oninput事件来跟踪输入的值，并使用与此margin-left成比例的value。

以下是您需要的代码：

$('input[type="range"]').on('input', function() {
  $('span#a').css('margin-left', parseInt($(this).val() - 10) > 0 ? parseInt($(this).val() - 10) + '%' : '0px');
});

<强>演示：

$('input[type="range"]').on('input', function() {
  $('span#a').css('margin-left', parseInt($(this).val() - 10) > 0 ? parseInt($(this).val() - 10) + '%' : '0px');
});

input {
  width: 90%;
}

span#a {
  display: block;
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="100" step="1" value="0" />
<span id="a">I'm following.</span>

注意：

这会将span左边距更新为与值成比例 range的{{1}}，因此会在0%到100%之间进行更新，从而为其提供浮动效果。

在以下示例演示中，margin-left值需要更多
调整，这样会产生更好的结果。逻辑就在那里，但是需要一些调整。

如何在输入类型范围上创建浮动元素

2 个答案: