<div class="wrap">
<div class="frame">
  <div class="center">
		<div class="range-box">
			<input type="range" min="0" max="100" class="center">
		</div>
		<div class="range-index-wrap"><span class="range-index">50</span> %</div>
	</div>
</div>
</div>
// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
.wrap {
	width: 100vw;
	height: 100vh;
	background: #643a7a;
}
// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: .5rem .5rem 1rem rgba(0,0,0,0.6);
	overflow: hidden;
  background: #201c29;
  color: #333;
	font-family: 'Montserrat', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: flex;
	justify-content: center;
	align-items: center;
}
.center {
	width: 90%;
	height: .2rem;
	border-radius: 20px;
}
.range-index-wrap {
  color: #f3edf7;
  width: 100%;
  text-align: center;
	padding-top: 2rem;
	font-size: 1.5rem;
}
[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  top: 31%;
	background: #ad2fed;
}

[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

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

[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
  border: 2px solid #ad2fed;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  position: relative;
  top: -10px;
}

[type=range]::-moz-range-thumb  {
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
  border: 2px solid #ad2fed;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #f3edf7;
  cursor: pointer;
  position: relative;
  top: -10px;
}

[type=range]::-ms-thumb {
  box-shadow: 0 .1rem .5rem 0 rgba(0, 0, 0, .3);
  border: 4px solid #ad2fed;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #f3edf7;
  cursor: pointer;
  position: relative;
  top: -10px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 0 .1rem .5rem 0 rgba(0, 0, 0, .3);
  background: #ad2fed;
  border: none;
  border-radius: 5px;
}

[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 0 .1rem .5rem 0 rgba(0, 0, 0, .3);
  background: #ad2fed;
  border: none;
  border-radius: 5px;
}

[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
  background: #ad2fed;
  border: none;
  border-radius: 2px;
}

[type=range]::-ms-fill-lower, [type=range]::-ms-fill-upper {
	background: #ad2fed;
  border: none;
  border-radius: 2px;
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
}

[type=range]:focus::-ms-fill-lower {
	background: #ad2fed;
}

[type=range]:focus::-ms-fill-upper {
	background: #ad2fed;
}
[type=range]:focus::-webkit-slider-runnable-track {
	background: #ad2fed;
}
View Compiled
// jQuery v3.3.1 is supported
$("[type=range]").on("change ", function() {
   $(".range-index").html($(this).val());
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://100dayscss.com/codepen/js/jquery.min.js