使范围输出具有响应性

Question

使范围输出具有响应性

javascriptjqueryhtmlcss

7

好的，我遇到的问题是让范围输出响应式。

当前，当您运行代码时，它的工作正常，因为该值被定位在像素中，但是当您重新调整视口大小时，它与滑块拇指的对齐不正确。我认为，使用百分比而不是像素来对齐输出可能会解决问题，但我不知道如何正确地实现它。

我尝试了一些操作，但没有成功，有人知道我该如何实现吗？

HTML：

<form>
    <div class="range-control" data-thumbwidth="20">
        <input id="inputRange" type="range" min="0" max="100" step="1" value="0">
            <div><output name="rangeVal">0</output></div>
    </div>
 </form>

CSS：

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-family: Arial, sans-serif;
}

form {
    padding-top: 100px;
    margin: 0 auto;
}

.range-control {
    position: relative;
}

input[type=range] {
    display: block;
    width: 100%;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    position: relative;
    height: 12px;
    border: 1px solid #b2b2b2;
    border-radius: 5px;
    background-color: #e2e2e2;
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.1);
}

input[type=range]::-webkit-slider-thumb {
    position: relative;
    top: -5px;
    width: 20px;
    height: 20px;
    border: 1px solid #999;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    box-shadow: inset 0 -1px 2px 0 rgba(0,0,0,0.25);
    border-radius: 100%;
    cursor: pointer;
}

output {
    position: absolute;
    top: 20px;
    width: 50px;
    height: 24px;
    border: 1px solid #e2e2e2;
    margin-left: -15px;
    background-color: #fff;
    border-radius: 3px;
    color: #777;
    font-size: .8em;
    line-height: 24px;
    text-align: center;
}

input[type=range]:active + output {
    display: block;
}

JQUERY:

$('.range-control').each(function(){
    var container = $(this),
        input = container.find('input'),
        output = container.find('output'),
        rangeWidth = input.width(),
        thumbWidth = container.attr('data-thumbwidth'),
        startValue = input.val(),
        startOffset = ((rangeWidth - thumbWidth) / 100) * startValue + '%';

    output
        .css({
            'left' : startOffset
        });

    $(input).on('input', function(){
        var value = this.value,
            offset = ((rangeWidth - thumbWidth) / 100) * value;

    output
        .val(value)
        .css({
            'left' : offset
        });

    });
});

JSFiddle

欢迎提供任何帮助!!!

** 编辑 ** 请阅读

以下是 Mohamed-Yousef 给出的答案，可以解决问题，因此我已经给他点赞了。但是，他在代码中重复了变量两次（有关详细信息，请查看他的回答）。我认为有一种更有效的方法来做到这一点（使用更少的代码），如果有人有更好的方法，请分享。

- Jordan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohamed-Yousef · Accepted Answer

简单来说，你需要在窗口大小改变时更新你的变量以改变它的值。同时，在每个函数内部让你的输入事件打印它多次，这会导致在调整大小后无法读取新的变量。因此，我将其单独提出并运行每个事件。

编辑后：

$(document).ready(function(){
    var container,input,output,rangeWidth,thumbWidth,startValue,startOffset;
    // make a function to update variable
    var update_variable = function(){
        $('.range-control').each(function(){
            container = $(this);
            input = container.find('input');
            output = container.find('output');
            rangeWidth = input.width();
            thumbWidth = container.attr('data-thumbwidth');
            startValue = input.val();
            startOffset = ((rangeWidth - thumbWidth) / 100) * startValue;

        output
            .css({
                'left' : startOffset
            });

        });   
    }
    // update variable after document ready
    update_variable();

    // input input event
    $('.range-control > input').on('input', function(){
            var value = this.value,
                offset = ((rangeWidth - thumbWidth) / 100) * value;

        $(this).closest('.range-control').find('output')
            .val(value +'%')
            .css({
                'left' : offset
            });
        });
    // update variable in window resize
    $(window).on('resize',update_variable);  
});

点击此处查看演示

重要提示：如果您的输入框宽度相同，则此代码将完美地工作。如果宽度不同，则需要使用元素数组来获取每个元素的宽度。