JSFiddle - React, Tailwind, and code Playground

HTML

<div class="range-container">
		<div class="slider-container">
			<input class="slider" type="range" name="testerslider" min="0" max="4" step="0.1" list="testlist">
			<div class="range-fill"></div>	
		</div>
		
		<div class="label-container">
			<div class="label">test1sdfs ksjdfs kfhjs skjfhs skdjfshd ksjdhfsk fsdkjf hskfjh jsksjfhs kjshd jdhd.</div>
			<div class="label">test2sd sdf sdfs sdfsdf sfsdf sdfsdf sdfdfdff sdfff</div>
			<div class="label">test3 sfdsf sdfsd sdfsf sdfsdf</div>
			<div class="label">test4 sdfsf sfdsf sdfsdf sdfsdfs sfsfd sfdf</div>
			<div class="label">test5 sdfsf sfsfddf</div>
		</div>
	</div>

CSS

/*currently only prefixed for webkit*/
body {
	display: -webkit-flex;
	-webkit-justify-content: center;
	font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
	font-weight: 300;
}
.range-container {
	width: 90%;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	margin-top: 2rem;
}

.label-container {
	-webkit-flex-basis: 100%;
	display: -webkit-flex;
	-webkit-flex-wrap: nowrap;
	-webkit-justify-content: space-between;
	margin-top: 2rem;
}

.label {
	color: grey;
	font-size: 1rem;
	margin-top: 1rem;
	text-align: center;
	max-width: 3rem;
}
.slider-container {
	position: relative;
	height: 100%;
	width: 100%;
}
.slider, .range-fill {
	position: absolute;
}

.slider {
	left: 0;
	width: 100%;
}

.range-fill {
	left: 0;
	background-color: orange;
	height: 16px;
	pointer-events: none;
	border-radius: 10px 0 0 10px;
}

input[type=range] {
	-webkit-appearance: none;
	-webkit-flex-basis: 100%;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 10rem;
    height: 1rem;
    background: #fff;
    border: 2px solid red;
    border-radius: 10px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    background: orange;
    margin-top: -1.2rem;
    border: 2px solid #fff;
    cursor: pointer;
}

input[type=range]:focus {
    outline: none;
}

/*MEDIA QUERIES*/

@media (min-width:992px){ 
	.range-container {
		width: 70%;
		max-width: 60rem;
		display: -webkit-flex;
		-webkit-flex-wrap: wrap;
		margin-top: 5rem;
	}
	.label-container {
		margin-top: 2rem;
	}
	.label {
		font-size: 2rem;
		max-width: 8rem;
	}
	.slider-container {
		height: 2.5rem;
	}
	.range-fill {
		border-radius: 20px 0 0 20px;
		height: 40px;
	}
	input[type=range]::-webkit-slider-thumb {
		width: 6rem;
		height: 6rem;
		margin-top: -1.7rem;
	}
	input[type=range]::-webkit-slider-runnable-track {
		width: 10rem;
		height: 2.5rem;
		border-radius: 20px;
	}
}

@media(min-width:1200px){
	.range-container...

JavaScript

$(document).ready(function(){
	
	var $slider = $('.slider');
	$slider.on("mousemove click", function(event){
		if (event.which === 1){
			var maxValue = $('.slider').prop('max');
			var $this = $(this);
			var rangeWidth = ($this.val() / maxValue * 100) + "%";
			$('.range-fill').css("width", rangeWidth);
		}
	});

	$slider.on("mouseup click", function() {
			var $this = $(this);
			$(this).val(parseInt(Math.round($this.val())));
	});
});