WapSter

Если явно не указывать в пх высоту родительского блока, то высота дочерних в % ничего не даёт. Чтобы появился скролл, нужно задать overflow-x/y: scroll или auto(в чем разница не могу вспомнить, что-то связанное с ie было, он вроде не делает блок прокручиваемым) и ограничить блок по высоте/ширине соответственно.

: что если завести отдельную функцию

и где там у тебя функция? Ты присвоил переменной значение и его постоянно используешь.

clip-path.
Псевдоэлементом с фоном поверх угла.

https://github.com/anseki/leader-line

<div class="filter">
            <div class="filter__item form-el">
                <h3 class="form-el__title"></h3>
                <div class="form-el__input-row">
                    <input type="radio" class="form-el__input">
                    <label for="" class="form-el__label"></label>
                </div>
            </div>
            <div class="filter__item range-slider">
                <h3 class="range-slider__title"></h3>
                <!--   необходимые элементы для слайдера             -->
            </div>
            <div class="filter__item form-el">
                <h3 class="form-el__title"></h3>
                <div class="form-el__input-row">
                    <input type="checkbox" class="form-el__input">
                    <label for="" class="form-el__label"></label>
                    <span class="form-el__count"></span>
                </div>
            </div>
        </div>

Думаю можно и так. Над названиями блоков можно еще подумать. Заголовки возможно вообще лучше сделать отдельным блоком. Так же можно и не миксовать элменты фильтра с блоками инпутов.

Контекст потерялся, используй стрелочную функцию.

SaveData(){
        setInterval(() => {
          alert("Save")
          var json_messages = JSON.stringify(this.messages)
          var json_accounts = JSON.stringify(this.accounts)
          axios.get("https://twitchchatbots.top/backend/save_data.php?token="+this.Token()+"&messages="+json_messages+"&accounts="+json_accounts)
        }, 10000)
      },

В css должны быть на одном уровне, чтобы сработал +. А в js для события blur пропиши появление.

svg-spritemap-webpack-plugin. Работает фигово. Спрайты создает, но с dev сервером вообще отказывается работать, после добавления изображения нужно пересобирать проект, тогда и dev сервер видит изменения. Альтернатив я не нашел.

https://codepen.io/wapster92/pen/gOPyowP

.menu_block {
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

А вообще лучше закинь код в песочницу.

Он работает постоянно при клике тут все верно, но

var input = document.getElementById('input').value;
input = parseInt(input);

вызывается один раз при загрузке, соответсвенно, что бы кто не ввел input всегда будет NaN в твоем случае. Тебе данный код нужно внутрь события сунуть.

Если названия и путь у этих файлов идентичны то один раз.

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

clip-path лучший вариант, так как там не только срез но и закругление. Ещё можно svg картинку нарисовать и ее вставить фоном. Видел как такое при помощи градиентов делают, но не могу найти пример кода.
Как вариант можешь сделать без скруглений при помощи псевдоэлемента, а через @supports добавить вариант с clip-path