HTML

HTML slider

body {
background: linear-gradient(to right, red, yellow);
}
.slider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 60px;
padding: 30px;
padding-left: 40px;
background: #fcfcfc;
border-radius: 20px;
display: flex;
align-items: center;
box-shadow: 0px 15px 40px #7E6D5766;
}
.slider p {
font-size: 26px;
font-weight: 600;
font-family: Open Sans;
padding-left: 30px;
color: black;
}
.slider input[type="range"] {
-webkit-appearance:none !important;
width: 420px;
height: 2px;
background: black;
border: none;
outline: none;
}
.slider input[type="range"]::-webkit-slider-thumb:hover {
background: black;
}