Ширина контента - ползунком

Устанавливаем ширину контента с помощью input range и стандартного js

by Anatoly Kulikov

HTML

<main>
    <input id="range" class="input" type="range" value="75" min="75" max="100" step="5">
    <article class="container" id="container">
        <h1>Ваш шедевр готов!</h1>
        <p>Повседневная практика показывает, что укрепление и развитие структуры позволяет оценить значение существенных финансовых и административных условий. Равным образом постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки систем массового участия. Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации форм развития. Таким образом реализация намеченных плановых заданий позволяет оценить значение существенных финансовых и административных условий.</p>
        <p>Товарищи! постоянный количественный рост и сфера нашей активности позволяет оценить значение существенных финансовых и административных условий. Товарищи! реализация намеченных плановых заданий в значительной степени обуславливает создание новых предложений.</p>
        <p>Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. Значимость этих проблем настолько очевидна, что укрепление и развитие структуры позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. Значимость этих проблем настолько очевидна, что сложившаяся структура организации позволяет выполнять важные задания по разработке форм развития. Не следует, однако забывать, что сложившаяся структура организации позволяет оценить значение форм развития.</p>
        <img src="https://sun1-11.userapi.com/c635101/v635101660/31829/C4fNgsc29b4.jpg" alt="telegram">
        <p>Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение направлений прогрессивного развития. Таким образом реализация намеченных плановых заданий позволяет выполнять важные задания по...

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #f7f7f7;
}
main {
    display: block;
    width: 95%;
    margin: 50px auto;
    
}
input {
    display: block;
    width: 13%;
    margin-left: 87%;
    margin-right: auto;
    margin-bottom: 40px;
}
.container {
    display: block;
    margin: 0 auto;
    padding: 20px 20px 30px;
    box-shadow: #e0e0e0 0px 0px 15px;
    background: #fff;
    transition: all linear 0.2s;
}
    
h1 {
    margin-bottom: 2rem;
    font-size: 48px;
}
    
img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
}
p {
    margin-bottom: 0.75rem;
    font-size: 18px;
    line-height: 140%;
}

JavaScript

var input = document.querySelector("input"),

value = input.value + '%';

document.getElementById('container').style.width = value;

console.log("Текущая ширина: " + value);

input.addEventListener("input",function(){
    value = this.value + '%';
    document.getElementById('container').style.width = value;
    console.log("Новая ширина контента: " + value);
},
0);