<input type='range' style='--val: 50' aria-label='Comparison slider. Shows a black and white image that is made into a monochrome one after the slider thumb vs. its original version before the slider thumb.'/>
View Compiled
$thumb-w: 1em;
$thumb-x: -.5*$thumb-w;
@mixin thumb($f: 0) {
@if $f > 0 {
/* these two only needed for Firefox */
border: none;
border-radius: 0
}
width: $thumb-w; height: 100%;
background: #fff9;
cursor: ew-resize
}
* { margin: 0 }
html, body { display: grid }
html { min-height: 100% }
body { overflow: hidden }
[type='range'] {
&, &::-webkit-slider-thumb { appearance: none }
margin: 0 $thumb-x;
background:
linear-gradient(90deg, #0000 calc(var(--val)*1%), midnightblue 0)
50%/ calc(100% - #{$thumb-w}),
url(https://images.unsplash.com/photo-1602696538772-97543c359260?w=2400)
50%/ cover;
background-blend-mode: color;
/* explicit track height only needed for WebKit */
&::-webkit-slider-runnable-track { height: 100% }
&::-webkit-slider-thumb { @include thumb }
&::-moz-range-thumb { @include thumb(1) }
}
View Compiled
addEventListener('input', e => {
let _t = e.target;
_t.style.setProperty('--val', +_t.value)
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.