<form>
	<input id='sr' type='range' 
				 min='4' value='4' max='300' step='4'/>
	<label for='sr'>box-shadow: 0 0 0 
		<output for='sr'>4</output>
	</label>
</form>

<div class='box'></div>

$theme-dark: #262626;
$theme-light: invert($theme-dark);
$theme-orange: #f90;
$theme-tomato: #b53;
$theme-purple: #95a;
$r: 2.5em; // scoop radius

.box { /* these are all the essential styles */
	overflow: hidden;
	position: relative;
	margin: .75em auto 0;
  outline: solid 3px $theme-dark;
  max-width: 15em;
  min-height: 10em;
	
	&:before {
    position: absolute;
		margin: -$r;
    padding: $r;
		border-radius: 50%;
		box-shadow: 0 0 0 var(--sr) $theme-purple;
    content: ''
  }
}


/* JUST PRETTYFYING STUFF, NOT ESSENTIAL FOR A WORKING DEMO */

//* slider variables */
$track-w: 90vw;
$track-h: .25em;
$thumb-d: 1.5em;

//* slider mixins */
@mixin track() {
	box-sizing: border-box;
	border: none;
	width: 100%; height: $track-h;
	border-radius: $track-h;
	background: $theme-light
}

@mixin thumb() {
	box-sizing: border-box;
	border: none;
	width: $thumb-d; height: $thumb-d;
	border-radius: 50%;
	background: currentcolor;
}

* {
	margin: 0;
	color: inherit;
	font: 1em/ 2 consolas, monaco, monospace
}

html {
	$over-c: rgba($theme-light, .5);
	height: 100%;
	background: 
		linear-gradient($over-c, $over-c), 
		url(https://images.unsplash.com/photo-1510920018318-3b4dfe979e4d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=76eda3022d9860f69a7fc7a94e46c3e6) 0 0/ cover
}

form {
	padding: 1em;
	background: $theme-dark;
	color: $theme-light;
}

[type='range'] {
	&, &::-webkit-slider-thumb {
		-webkit-appearance: none
	}
	
	display: block;
	margin: 0 auto 1em;
	padding: 0;
	width: $track-w; height: $thumb-d;
	background: transparent;
	cursor: pointer;
	
	&::-webkit-slider-runnable-track {
		@include track
	}
	&::-moz-range-track { @include track }
	&::-ms-track { @include track }
	
	&::-webkit-slider-thumb {
		margin-top: .5*($track-h - $thumb-d);
		@include thumb
	}
	&::-moz-range-thumb { @include thumb }
	&::-ms-thumb {
		margin-top: 0;
		@include thumb
	}
	
	&::-ms-tooltip { display: none }
	
	&:focus {
		outline: solid 1px transparent;
		color: $theme-orange;
		
		+ label output { color: $theme-orange }
	}
}

output:after { content: 'px' }

const _SR = document.getElementById('sr'), 
			_O = _SR.nextElementSibling.querySelector('output');

let v;

function update() {
	if(v !== +_SR.value) {
		document.body.style.setProperty(`--sr`, `${_O.value = v = +_SR.value}px`)
	}
};

update();

addEventListener('change', update, false);
addEventListener('input', update, false);