javascript - 箭头位置问题 - 范围输入

Question

我在网上找到了一个符合我期望的输入范围脚本。我开始自己处理。一切正常，除了点下的云位置。我尝试了不同的方法，但脚本仍然无法正常工作。无论位置如何，我都希望云中的三角形始终位于点下方。

$.fn.WBslider = function () {
    return this.each(function () {
        var $_this = $(this),
            $_date = $('input', $_this),
            $_title = $('.setyear', $_this),
            thumbwidth = 85, // set this to the pixel width of the thumb
            yrnow = 200;


        $_date.on('input change keyup', function () {
            var $_this = $(this),
                val = parseInt($_date.val(), 10);

            if (val < 70) {
                val = '< 70';
            }
            if (val === '') { // Stop IE8 displaying NaN
                val = 0;
            }

            $_title.text(val);

            var pos = (val - $_date.attr('min')) / ($_date.attr('max') - $_date.attr('min'));

            // position the title with the thumb
            var thumbCorrect = thumbwidth * (pos - 0.5) * -1,
                titlepos = Math.round((pos * $_date.width()) - thumbwidth / 4 + thumbCorrect);

            $_title.css({
                'left': titlepos
            });

            // show "progress" on the track
            pos = Math.round(pos * 99); // to hide stuff behide the thumb
            var grad = 'linear-gradient(90deg, #fb824f ' + pos + '%,#e2e5ec ' + (pos + 1) + '%)';
            $_date.css({
                'background': grad
            });

        }).on('focus', function () {
            if (isNaN($(this).val())) {
                $(this).val(0);
            }
        }).trigger('change');

        $(window).on('resize', function () {
            $_date.trigger('change');
        });
    });
};

$(function () {

    $('.slider').WBslider();

});

.startyear,
.endyear {
    float: left;
    color: #333;
    text-align: right;
    font-weight: bold;
}

.endyear {
    text-align: left;
}

.setyear {
    position: absolute;
    bottom: -65px;
    left: 50%;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;

    min-width: 85px;
    box-shadow: 1px 3px 5px #d5d7db;
    border-radius: 5px;
    border: 1px solid #e4e7eb;
    background-color: #ffffff;
    padding: 10px 25px;

    color: #494e53;
    font-size: 12px;
    font-weight: 600;

    
}
.setyear:before {
        position: absolute;
        margin-top: -21px;
        content: URL("https://image.ibb.co/eSib69/range_arrow.png");
        background-color: transparent;
}

.range {
    position: relative;
    float: left;
    padding: 0 0.9375rem;
}

input[type=range] {
    -webkit-appearance: none;
    display: block;
    height: 4px;
    padding: 0;
    background: #FFE014;
    box-sizing: content-box;
    border-right: 0 !important;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 7px solid #fff;
    border-radius: 25px;
    background: #fb824f;
    box-shadow: 0 2px 9px rgba(185, 185, 185, 0.75);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>

  <div class="slider">
    <span class="startyear">max. 250 kg</span>
    <div class="range">
      <input type="range" name="date" id="date1" min="70" max="200" step="1" value="Please enter the year of build" required>
      <span class="setyear"></span>
    </div>
    <span class="endyear">max. 250 kg</span>
  </div>

</form>

标签： javascriptjqueryinputrange

Answer 1

我试图通过线性渐变找出类型范围的位置。它可能不准确，但在某种程度上，它确实有效。

$.fn.WBslider = function() {
    return this.each(function() {
        var $_this = $(this),
            $_date = $('input', $_this),
            $_title = $('.setyear', $_this),
            thumbwidth = 85, // set this to the pixel width of the thumb
            yrnow = 200;


        $_date.on('input change keyup', function() {
            var $_this = $(this),
                val = parseInt($_date.val(), 10);

            if (val < 70) {
                val = '< 70';
            }
            if (val === '') { // Stop IE8 displaying NaN
                val = 0;
            }

            $_title.text(val);

            var pos = (val - $_date.attr('min')) / ($_date.attr('max') - $_date.attr('min'));

            // position the title with the thumb
            var thumbCorrect = thumbwidth * (pos - 0.5) * -1,
                titlepos = Math.round((pos * $_date.width()) - thumbwidth / 4 + thumbCorrect);

            if ($("#date1").attr("style") != undefined) {
                titlepos = 23 + parseFloat($("#date1").attr("style").split(" ").pop().split("%")[0]);
            } else {
                titlepos = 70;
            }
            $_title.css({
                'left': titlepos
            });

            // show "progress" on the track
            pos = Math.round(pos * 99); // to hide stuff behide the thumb
            var grad = 'linear-gradient(90deg, #fb824f ' + pos + '%,#e2e5ec ' + (pos + 1) + '%)';
            $_date.css({
                'background': grad
            });

        }).on('focus', function() {
            if (isNaN($(this).val())) {
                $(this).val(0);
            }
        }).trigger('change');

        $(window).on('resize', function() {
            $_date.trigger('change');
        });
    });
};

$(function() {

    $('.slider').WBslider();

});

https://jsfiddle.net/4Lqmw1sz/4/