How to create a slider diagram for a webpage?

Question

I would like to create a slider diagram like this for my webpage to display results:

How can I do this provided I have a maximum and minimum and the value I would like to plot? Prefereably, I would like to create it on-the-fly as I generate the result page using html/javascript/php.

EDIT: I can see that my question was confusing. I do not want to create a slider (like an input to a form form) but an output diagram that has a vertical line at a fixed value with a colour gradient background.

Thank you for any answers!

Answer 1

At last, I've got it. Just HTML and CSS (and PHP if I want to be able to dynamically assign the vertical line by using style="left:x%")

.grad {
	background: linear-gradient(to right, rgba(185, 74, 72, 0.75), rgba(192, 152, 83,0.25), rgba(70, 136, 71,0.75));
	width: 100px;
	height: 15px;
	border-radius: 24px;
	border-color: #446e9b;
	border-width: 1px;
}

.vertical-line {
	width: 1px;
	height: 15px;
	border-left: 2px solid #446e9b;
	position: relative;
	top: 0;
	background: none;
}

.tick {
	width: 1px;
	height: 5px;
	border-left: 1px solid #999999;
	position: relative;
	top: 0;
	background: none;
}

.bottom-tick {
	margin-top: -5px;
}

.top-tick{
  margin-top: -5px;
}

.inner10{
	z-index: 10;
}
.inner2{
	z-index: 2;
	left: 20%;
	margin-top: -15px;
}
.inner3{
	z-index: 3;
	left: 40%;
}
.inner4{
	z-index: 4;
	left: 60%;
}
.inner5{
	z-index: 5;
	left: 80%;
}
.inner6{
	z-index: 6;
	left: 20%;
}
.inner7{
	z-index: 7;
	left: 40%;
}
.inner8{
	z-index: 8;
	left: 60%;
}
.inner9{
	z-index: 9;
	left: 80%;
}

<div class="grad">
  <div class='vertical-line inner10' style="left:35%"></div>
  <div class='tick inner6 bottom-tick'></div>
  <div class='tick inner7 bottom-tick'></div>
  <div class='tick inner8 bottom-tick'></div>
  <div class='tick inner9 bottom-tick'></div>
  <div class='tick inner2'></div>
  <div class='tick inner3 top-tick'></div>
  <div class='tick inner4 top-tick'></div>
  <div class='tick inner5 top-tick'></div>
</div>