JSFiddle - React, Tailwind, and code Playground

by profesor08

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 class="scrollbar">
    <input type="range" id="scrollbar-input" value="0">
  </div>
</div>

CSS

body {
  padding: 10px;
}

.viewport {
	position: relative;
	overflow: hidden;
  width: 670px;
}
  
.content {
	position: relative;
	top: 0;
	left: 0;
	height: 150px;
  display: flex;
}
  
.content__item {
  display: inline-block;
  flex: 0 0 150px;
  text-align: center;
  border: 1px solid red;
}
.content__item:not(:last-child) {
	margin-right: 20px;
}
  
.scrollbar {
	width: 100%;
	margin-top: 20px;
	background: #eee;
}
  
#scrollbar-input {
	width: 100%;
}

JavaScript

let viewport = document.querySelector(".viewport");
let content = document.querySelector(".content");
let scrollBar = document.querySelector("#scrollbar-input");

scrollBar.min = 0;
scrollBar.max = content.scrollWidth - viewport.clientWidth;

scrollBar.addEventListener("input", function()
{
	content.style.left = -(this.value) + "px";
});