Пара слайдеров на чистом HTML + Vanilla JS без использования input type = slider

Информация о материале
Категория: Новости
Просмотров: 794
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
  

<!DOCTYPE html>
<html>
<head>
    <title>Linear Sliders</title>
    <style>
        .slider-container {
            width: 300px;
            margin: 20px auto;
            text-align: center;
        }
        .slider {
            width: 100%;
            height: 30px;
            position: relative;
            background: linear-gradient(to right, darkblue, white, darkred);
            margin-bottom: 20px;
        }
        .center-line {
            position: absolute;
            width: 2px;
            height: 100%;
            background-color: #000;
            left: 50%;
            top: 0;
        }
        .handle {
            width: 10px;
            height: 30px;
            background-color: #000;
            position: absolute;
            cursor: pointer;
            margin-left: -5px;
        }
        .value-input {
            width: 60px;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="slider1-container" class="slider-container">
        <div id="slider1" class="slider">
            <div class="center-line"></div>
            <div id="handle1" class="handle"></div>
        </div>
        <input type="number" id="value1-input" class="value-input" step="0.1" value="0.0">
    </div>

    <div id="slider2-container" class="slider-container">
        <div id="slider2" class="slider">
            <div class="center-line"></div>
            <div id="handle2" class="handle"></div>
        </div>
        <input type="number" id="value2-input" class="value-input" step="0.1" value="0.0">
    </div>

    <script>
        function initializeSlider(sliderId, handleId, inputId) {
            var slider = document.getElementById(sliderId);
            var handle = document.getElementById(handleId);
            var valueInput = document.getElementById(inputId);

            function setHandlePosition(value) {
                var sliderRect = slider.getBoundingClientRect();
                var newLeft = ((value + 60) / 120) * sliderRect.width;
                handle.style.left = newLeft + 'px';
            }

            // Initial handle position
            setHandlePosition(0);

            handle.onmousedown = function(event) {
                event.preventDefault();

                document.onmousemove = function(event) {
                    var sliderRect = slider.getBoundingClientRect();
                    var newLeft = event.clientX - sliderRect.left;

                    if (newLeft < 0) newLeft = 0;
                    if (newLeft > sliderRect.width) newLeft = sliderRect.width;

                    handle.style.left = newLeft + 'px';

                    var value = ((newLeft / sliderRect.width) * 120 - 60).toFixed(1);
                    valueInput.value = value;
                };

                document.onmouseup = function() {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };

            valueInput.onchange = function() {
                var value = parseFloat(valueInput.value);
                if (isNaN(value)) {
                    value = 0;
                }
                if (value < -60) value = -60;
                if (value > 60) value = 60;
                setHandlePosition(value);
            };
        }

        initializeSlider('slider1', 'handle1', 'value1-input');
        initializeSlider('slider2', 'handle2', 'value2-input');
    </script>
</body>
</html>