JSFiddle - React, Tailwind, and code Playground

HTML

<div class="viewport">
	<div class="content">
		<div class="content__item">
			Элемент 1
		</div>
		<div class="content__item">
			Элемент 2
		</div>
		<div class="content__item">
			Элемент 3
		</div>
		<div class="content__item">
			Элемент 4
		</div>
		<div class="content__item">
			Элемент 5
		</div>
		<div class="content__item">
			Элемент 6
		</div>
		<div class="content__item">
			Элемент 7
		</div>
	</div>
</div>
  <div class="scrollbar">
    <input type="range" id="scrollbar-input" value="0">
  </div>

CSS

.viewport {
		position: relative;
		overflow: hidden;
		width: 500px;
		height: 150px;
	}
	.content {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-wrap: nowrap;
	}
	.content__item {
		flex: 0 0 153.3333px;
	}
	.content__item:not(:last-child) {
		margin-right: 20px;
	}
	.scrollbar {
		width: 500px;
		margin-top: 20px;
		background: #eee;
	}
	#scrollbar-input {
		width: 100%;
	}

JavaScript

scrollItemCount = $('.content__item').length; // число элементов в скролле
	scrollItemWidth = parseFloat($('.content__item').eq(0).css('width')); // ширина одного элемента в скролле
	scrollItemMargin = parseFloat($('.content__item').eq(0).css('margin-right')); // боковой отступ одного элемента в скролле
	scrollItemMinus = 3; // сколько элементов влазит в один экран слайдера
	scrollContentWidth = scrollItemCount*scrollItemWidth + (scrollItemCount-1)*scrollItemMargin;

	scrollRangeMin = 0;
	scrollRangeMax = parseFloat(scrollContentWidth - scrollItemMinus*scrollItemWidth - (scrollItemMinus-1)*scrollItemMargin);

	$('#scrollbar-input').attr('min', scrollRangeMin)
		.attr('max', scrollRangeMax);

	$('#scrollbar-input').on('change', function(){
		$('.content').css('left', parseFloat(-($(this).val()))+'px');
	})