<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' }
View Compiled
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);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.