Question

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

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

我试过搞乱它但没有运气，有谁知道我怎么能做到这一点？

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在回答这个问题的过程中回答了问题，所以我已经投了票，但是他已经在代码中重复了两次变量（有关详细信息，请参阅他的回答）。我认为有一种更有效的方法（使用更少的代码），所以如果有人有更好的方法，请分享。

Answer 1

只需要在窗口调整大小时更新你的变量来改变它的值..并使你的输入事件在每个函数内打印多次，这使得在调整大小后不能读取新变量..所以我把它拿出并运行每个事件

编辑后

$(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);  
});

DEMO HERE

重要说明：如果您的输入具有相同的宽度，此代码将完美运行..如果它的宽度不同，则需要使用元素数组来获取每个元素的宽度

使范围输出响应

1 个答案: