Сергей delphinpro

вы не дочитали определение, там дальше так:
Согласно MDN блок со значением position: absolute; позиционируется через свойства top:; left:; right:; bottom:; относительно ближайшего родителя со значением свойства position, отличным от static.

Псевдоэлемент на обертке

.slider {
  position: relative;
}
.slider::after {
  content: '';
  position:absolute;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(to right, transparent, black);
  width: 200px;
  z-index: 100;
}

Есть вариант задействовать переменные

Условный код:

:root {
  --left: 300px;
  --right: 200px;
}

.left {
  width: var(--left)
}

.right {
  width: var(--right)
}
.center {
  width: calc(100% - var(--left) - var(--right));
}

Соответственно, когда левая колонка скрыта:

.layout {
  --left: 0;
}

overflow: scroll сделает скроллбар всегда видимым, даже когда нет переполнения

Стесняюсь спросить: а что здесь нестандартного?
Я вам кажется уже отвечал по этой теме.
Как разделить (визуально) страницу на 4 части: 2 по горизонали, 2 по вертикали?

function getData() {
  return new Promise(resolve => {
    $.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) {
        const kyrs = Math.ceil(100 / data.Valute.KZT.Value * data.Valute.EUR.Value).toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
        resolve(kurs);
    });
  })
}

function func1(kurs) {
  console.log(kurs);
}

function func2(kurs) {
  console.log(kurs);
}

async function go() {
  const kurs = await getData();
  $('#euro').html(kyrs);
  func1(kurs);
  func2(kurs);
}

go();

событие update (ну или drug, я в доку не вникал) слайдера - это источник значения при изменении его слайдером. Здесь получаем это значение и вписываем его в input

метод setValue наоборот устанавливает значение в слайдер

По событию onchange или oninput на поле ввода вы получаете введенное значение и методом setValue устанавливаете его в слайдер.

по кнопкам плюс/минус вы не трогаете слайдер. А устанавливаете значение в инпут и триггерите на инпуте событие onchange/oninput (по этому триггеру сработает обновление слайдера).

то есть у вас почти правильно. только вот эту дичь нужно убрать $input.val = args.value; вообще непонятно, что вы собирались этим сделать.
Добавить слушатель onchange на инпут
И немного поправить drug

да все правильно
https://codepen.io/delphinpro/pen/KKJqNoJ

Это изображение контентное, а не оформительское. На реальном сайте, его очевидно будут загружать через админку. Его следует ставить через тег img

<div class="person">
  <img class="person__photo" src="">
  <div class="person__wrapper">
    <div class="person__name">Имя фамилия</div>
    <div class="person__position">Должность</div>
  </div>
</div>

.person {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.person__photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
}
.person__wrapper {
  display: grid;
  gap: 0.25rem;
}
.person__name {}
.person__position {}

Сделайте такую сетку



Картинки разместите с объединением ячеек grid-row: span 2; или указанием конкретных грид-линий.

<table class="table">
    <tr>
        <td class="moccasin" colspan="2">&nbsp;</th>
        <td class="greenyellow">&nbsp;</th>
    </tr>
    <tr>
        <td class="moccasin" rowspan="2">&nbsp;</td>
        <td class="cyan" colspan="2"></td>
    </tr>
    <tr>
        <td class="cyan">&nbsp;</td>
        <td class="greenyellow">&nbsp;</td>
    </tr>
</table>
<style>
.table {
  width: 300px;
  height: 300px;
  border-spacing: 5px;
  border-collapse: separate;
  border: none;
}
.table td {
  width: 33%;
  height: 33%;
}
.moccasin {
  background: moccasin;
}
.greenyellow {
  background: greenyellow;
}
.cyan {
  background: cyan;
}
</style>

маску наложить на картинку и все.
можно по старинке - прозрачная пнг
можно нормально сделать - svg/css маски
https://developer.mozilla.org/en-US/docs/Web/CSS/mask
Основные принципы маскирования в CSS

<a href="tel:+79998765432">+7 999 876 54 32</a>

Посчитайте максимально возможное смещение. Оно будет равным суме ширин все слайдов и промежутков между ними, минус ширина контейнера слайдера.
Если текущее смещение (-currentIndex * 220) будет превышать максимальное, то не применять его.

Это сделает параграф невидимым для мышки

div p {
  pointer-events: none;
}

А так вы можете определить по какому элементу сделан клик

document.querySelector('div').addEventListener('click', e => {
  console.log(e.currentTarget); // Будет див, даже если кликнули на внутренний элемент
});

document.querySelector('div').addEventListener('click', e => {
  console.log(e.target.closest('div'));
  // Будет НАЙДЕН див, внутри которого, или на нем самом кликнули
});

.header {
  display:grid;
  grid-template-columns: 1fr min-content 1fr;
}

<header>
  <left/>
  <logo/>
  <right/>
</header>