input[type="range"] {
	pointer-events: none;
}

input[type="range"]::-webkit-slider-thumb {
	pointer-events: auto;
}

.time-range-slider {
	display:flex;
	flex-direction:row;
	gap:20px;
	width: 100%;
	box-sizing: border-box;
}

.time-range-slider__label {
	display:flex;
	flex-direction:row;
	gap:10px;
	margin-bottom: 12px;
	font-size: 14px;
	color: #111;
}

.time-range-slider__body {
	position: relative;
	width: 100%;
	height: 36px;
}

.time-range-slider__track,
.time-range-slider__active {
	position: absolute;
	left: 0;
	top: 50%;
	height: 5px;
	border-radius: 999px;
	transform: translateY(-50%);
}

.time-range-slider__track {
	width: 100%;
	background: #d0d0d0;
}

.time-range-slider__active {
	background: orange;
}

.time-range-slider__body input[type="range"] {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 36px;
	margin: 0;
	padding: 0;
	background: none;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}

.time-range-slider__body input[type="range"]::-webkit-slider-runnable-track {
	height: 5px;
	background: transparent;
}

.time-range-slider__body input[type="range"]::-webkit-slider-thumb {
	width: 16px;
	height: 16px;
	margin-top: -5.5px;
	border: none;
	border-radius: 50%;
	background: orange;
	cursor: pointer;
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
}

.time-range-slider__body input[type="range"]::-moz-range-track {
	height: 5px;
	background: transparent;
}

.time-range-slider__body input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: none;
	border-radius: 50%;
	background: orange;
	cursor: pointer;
	pointer-events: auto;
}