Форум

giwuf · #1 (**permalink**) 03.04.2021, 13:10

Есть временная шкала input[type="range"] с ползунком и метками на 4,6,12 месяцев.

У меня не получается сделать так, чтобы можно было плавно тянуть за кругляш по всей длине ползунка, но чтобы он мог фиксироваться только на заданных отметках: 4,6,12. Сейчас реализован резкий переход.

А также вопрос как отцентрировать кругляш относительно метки и сдвинуть метку 4 месяца по шкале, чтобы она сохраняла адаптивность

Ссылка на фидл

var values = [4, 6, 12];
var range = document.getElementById('range');

range.addEventListener('input', function() {
  var rangeval = parseInt(this.value);
  var num = values.reduce(function(prev, curr) {
    return (Math.abs(curr - rangeval) < Math.abs(prev - rangeval) ? curr : prev);
  });
  this.value = num;
  this.style.background = 'linear-gradient(to right, rgb(223, 149, 52) 0%, rgb(223, 149, 52) ' + Math.floor(num / this.max * 100) + '%, rgb(234, 236, 238) ' + Math.floor(num / this.max * 100) + '%, rgb(234, 236, 238) 100%)';
});

range.addEventListener('mousemove', function() {
  this.style.background = 'linear-gradient(to right, rgb(223, 149, 52) 0%, rgb(223, 149, 52) ' + Math.floor(this.value / this.max * 100) + '%, rgb(234, 236, 238) ' + Math.floor(this.value / this.max * 100) + '%, rgb(234, 236, 238) 100%)';
});

<input class="slider" id="range" type="range" min="1" max="12" value="6" step="1">
<div class="bottom-row"><span>4 месяца</span><span>6 месяцев</span><span>12 месяцев</span>

.bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  margin-bottom: 12px;
}

#range {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  padding: 0;
  border-radius: 1px;
  border: none;
  background: linear-gradient(to right, rgb(223, 149, 52) 0%, rgb(223, 149, 52) 50%, rgb(234, 236, 238) 50%, rgb(234, 236, 238) 100%);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

#range:focus {
  outline: none;
}

#range:hover {
  opacity: 1;
}

#range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgb(223, 149, 52);
  cursor: pointer;
}

#range::-moz-range-thumb,
#range::-ms-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgb(223, 149, 52);
  cursor: pointer;
}

#range::-ms-fill-lower,
#range::-moz-range-progress {
  background-color: #ffdd2d;
}

#range::-ms-fill-upper,
#range::-moz-range-track {
  background-color: #eaecee;
}

рони · #2 (**permalink**) 03.04.2021, 14:27

giwuf,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .bottom-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12px;
            margin-bottom: 12px;
        }

        #range {
            -webkit-appearance: none;
            width: 100%;
            height: 2px;
            padding: 0;
            border-radius: 1px;
            border: none;
            background-image: linear-gradient(to right, rgb(223, 149, 52) 0%, rgb(223, 149, 52) 50%, rgb(234, 236, 238) 50%, rgb(234, 236, 238) 100%);
            outline: none;
            opacity: 0.7;
            transition: 1.2s;
        }

        #range:focus {
            outline: none;
        }

        #range:hover {
            opacity: 1;
        }

        #range::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: rgb(223, 149, 52);
            cursor: pointer;
        }

        #range::-moz-range-thumb,
        #range::-ms-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: rgb(223, 149, 52);
            cursor: pointer;
        }

        #range::-ms-fill-lower,
        #range::-moz-range-progress {
            background-color: #ffdd2d;
        }

        #range::-ms-fill-upper,
        #range::-moz-range-track {
            background-color: #eaecee;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var values = [4, 6, 12];
            var range = document.getElementById('range');

            function getPersent(value, max) {
                return value / max * 100 | 0;
            }

            function setBackground(percent) {
                range.style.backgroundImage = `linear-gradient(to right, rgb(223, 149, 52) 0%, rgb(223, 149, 52) ${percent}%, rgb(234, 236, 238) ${percent}%, rgb(234, 236, 238) 100%)`
            }

            function move(from, to, duration) {
                var now = performance.now();
                requestAnimationFrame(function animate(time) {
                    time = (time - now) / duration;
                    1 < time && (time = 1);
                    var value = from + (to - from) * time;
                    var percent = value / 2 * 100 | 0;
                    range.value = value;
                    setBackground(percent);
                    time < 1 && requestAnimationFrame(animate)
                })
            }
            range.addEventListener('mousemove', function() {
                var percent = getPersent(this.value, this.max);
                setBackground(percent)
            });
            range.addEventListener('mouseup', function() {
                var from = +this.value,
                    to = Math.round(+this.value);
                duration = 800;
                move(from, to, duration)
                document.querySelector('input.hidden').value = values[to]
            });
        });
    </script>
</head>

<body>
    <input class="hidden" value="6" readonly="readonly">
    <input class="slider" id="range" type="range" min="0" max="2" value="1" step=".01">
    <div class="bottom-row"><span>4 месяца</span><span>6 месяцев</span><span>12 месяцев</span></div>
</body>

</html>

giwuf · #3 (**permalink**) 03.04.2021, 15:24

Рони, благодарю!

Форум

Справочник

Discord чат

Курсы javascript