Проблема с положением стрелки - ввод диапазона - PullRequest
Новая
       42

Проблема с положением стрелки - ввод диапазона

0 голосов
/ 10 октября 2018

Я нашел в Интернете сценарий диапазона ввода, который соответствует моим ожиданиям.Я начал обрабатывать его под себя.И все работает нормально, кроме положения облака под точкой.Я пробовал разные способы, но все равно скрипт не работает как надо.Я бы хотел, чтобы треугольник из облака всегда находился под точкой независимо от положения. 

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

1 Ответ

0 голосов
/ 10 октября 2018

Я пытался выяснить положение диапазона типов с помощью линейного градиента.Это может быть не точно, но в определенной степени это делает работу. 

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

...