<div class="progress"></div>
<input id="value-input" type="range" max="37" value="12">
<p><a href="https://github.com/tigrr/circle-progress" target="_blank" rel="noopener">Circle Progress on GitHub</a>

body {
	margin: 20px 10px;
	background: #1d1e22;
	text-align: center;
	font-family: Montserrat, Helvetica Neueu, Helvetica, Arial, sans-serif;
}



.progress {
	--progress-value: .3243;
	--color: hsl(calc(240 * (1 - var(--progress-value))), 100%, calc(30% + 20% * var(--progress-value)));
}

.circle-progress {
	width: 250px;
	height: 250px;
}


.circle-progress-value {
	stroke-width: 6px;
	stroke: var(--color);
	stroke-dasharray: 5.98 2;
	transition: stroke .4s;
}

.circle-progress-circle {
	stroke-width: 2px;
	stroke: hsl(228, 8%, 10%);
}

.circle-progress-text {
	font-weight: bold;
	fill: var(--color);
	transform: translateX(.2em);
	transition: fill .4s;
}



input[type=range] {
	width: 210px;
	margin-top: 30px;
	margin-bottom: 20px;
	-webkit-appearance: none;
	display: inline-block;
	background: none;
	cursor: pointer;

	&:focus {
		outline: none;
	}

	@mixin track {
		width: 100%;
		height: 6px;
		background: hsl(228, 8%, 10%);
		outline: none;
	}

	@mixin thumb {
		width: 16px;
		height: 16px;
		margin-top: -5px;
		background: hsl(228, 8%, 30%);
		transition: .15s;
		border: none;
		border-radius: 0;
	}

	@mixin thumb-active {
		background: hsl(228, 8%, 50%);
	}

	&::-webkit-slider-runnable-track {
		@include track;
	}

	&::-moz-range-track {
		@include track;
	}

	&::-ms-track {
		@include track;
	}

	&::-webkit-slider-thumb {
		-webkit-appearance: none;
		@include thumb;
	}

	&::-moz-range-thumb {
		@include thumb;
	}

	&::-ms-thumb {
		@include thumb;
	}

	&:hover::-webkit-slider-thumb,
	&:focus::-webkit-slider-thumb {
		@include thumb-active;
	}

	&:hover::-moz-range-thumb,
	&:focus::-moz-range-thumb {
		@include thumb-active;
	}

	&:hover::-ms-thumb,
	&:focus::-ms-thumb {
		@include thumb-active;
	}
}





a {
	color: hsl(228, 8%, 50%);
	text-decoration-offset: 4px;
}

const MAX = 37

const cp = new CircleProgress('.progress', {
	max: MAX,
	value: 12,
	animationDuration: 400,
	textFormat: (val) => val + '°',
});

document.querySelector('#value-input').addEventListener('change', e => {
	const val = e.target.value;
	cp.value = val;
	cp.el.style.setProperty('--progress-value', val / MAX);
})