- let min = 1, max = 5, val = min;
body(style=`--b: ${val}`)
form
label(for='b') blur amount
input#b(type='range' min=min value=val max=max step='.5')
output(for='b') contrast(16) blur(#{val}px) contrast(#{2.5*val})
View Compiled
html {
height: 100%;
--pattern:
repeating-conic-gradient(
#777, #fff, #777 2.5%);
--map: linear-gradient(90deg, #888, #fff);
background: var(--pattern), var(--map);
background-blend-mode: multiply
}
body {
margin: 0;
backdrop-filter: contrast(16)
blur(calc(var(--b)*.5px))
contrast(calc(2.5*var(--b)))
}
/* prettifying controls & stuff */
$track-h: 6px;
$track-r: .5*$track-h;
$thumb-d: 1em;
$thumb-r: .5*$thumb-d;
@mixin track() {
height: $track-h;
border-radius: $track-r;
background: dimgrey;
}
@mixin thumb($f: 0) {
@if $f > 0 {
margin-top: calc(#{$track-r} + -1*#{$thumb-r})
}
border: 0;
width: $thumb-d; height: $thumb-d;
border-radius: 50%;
background: currentcolor;
cursor: ew-resize
}
* { margin: 0; color: inherit; font: inherit }
html, body, form { display: grid }
form {
box-sizing: border-box;
place-self: end center;
margin: .5em;
width: Min(22.5em, 100%);
padding: .5em;
background: #370617;
color: #ededed;
font: clamp(.75em, 4vw, 1.25em) sans-serif
}
label {
justify-self: center;
&::after { content: ':' }
}
[type='range'] {
&, &::-webkit-slider-thumb { appearance: none }
--hov: 0;
width: 100%; height: $thumb-d;
background: #0000;
color: #f7b538;
filter: Saturate(var(--hov));
transition: filter .35s ease-out;
cursor: pointer;
&::-webkit-slider-runnable-track { @include track }
&::-moz-range-track { @include track }
&::slider-track { @include track }
&::-webkit-slider-thumb { @include thumb(1) }
&::-moz-range-thumb { @include thumb }
&::slider-thumb { @include thumb }
&:focus { outline: none }
&:is(:hover, :focus) { --hov: 1 }
}
output {
font: .875em monospace
}
View Compiled
addEventListener('input', e => {
let _t = e.target, v = +_t.value;
document.body.style.setProperty(`--${_t.id}`, v)
_t.nextElementSibling.textContent = `contrast(16) blur(${v}px) contrast(${2.5*v})`
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.