.wrap(role='group' aria-label='gradient from black to white with draggable progress position in between')
input#lum(type='range' list='num')
output.rgb(for='lum' style=`--i: 0`)
output.hsl(for='lum' style=`--i: 1`)
datalist#num(style=`--n: 3`)
option(value='0' label='black' style=`--i: 0`)
option(value='50' label='grey' style=`--i: 1`)
option(value='100' label='white' style=`--i: 2`)
View Compiled
$s: .5em;
$r: 5px;
$l: 2px;
$o: -.5*$l;
$c: #5e0b15;
$thumb-w: 3*$l;
$thumb-x: .5*$thumb-w;
$thumb-o: -1*$thumb-x;
@mixin thumb($f: 1) {
@if ($f > 0) {
box-sizing: border-box;
border: 0;
border-radius: 0;
}
padding: 0 .5*$l;
width: $thumb-w; height: 9em;
background: currentcolor content-box;
filter: drop-shadow(2px 2px 4px #0009);
cursor: ew-resize
}
* { margin: 0; color: inherit; font: inherit }
html, body, div, datalist { display: grid }
html { min-height: 100% }
body {
overflow-x: hidden;
padding: $s 10ch;
background: $c;
color: #bc8034;
font: 1em monospace;
}
.wrap {
--val: 50;
grid-gap: $s;
place-self: center;
container-type: inline-size;
width: min(100%, 60em);
& > * { --w: (100cqw - #{$thumb-w}) }
}
[type='range'] {
&,
&::-webkit-slider-thumb { appearance: none }
border-image:
repeating-linear-gradient(90deg,
#0000 0, #0009 $l, #90323d 0 2*$l,
#0009 0, #0000 3*$l calc(.5*var(--w)))
fill 0/ / 20vh 0;
background:
linear-gradient(90deg, #000, #fff)
50%/ calc(100% - #{$thumb-w}) no-repeat;
cursor: pointer;
&::-webkit-slider-thumb { @include thumb(0) }
&::-moz-range-thumb { @include thumb }
&::slider-thumb { @include thumb }
}
output {
--arr-p: 50% calc((1 - var(--i))*100%);
grid-row: calc(2*var(--i) + 1);
justify-self: start;
border: solid $s #0000;
padding: $s;
border-radius: calc(#{$s} + #{$r});
translate:
calc(#{$thumb-x} + .01*var(--val)*var(--w) - 50%);
background:
linear-gradient(currentcolor 0 0) padding-box,
conic-gradient(from calc(var(--i)*.5turn - 45deg)
at var(--arr-p), currentcolor 25%, #0000 0%)
var(--arr-p)/ 50% 50% no-repeat border-box;
white-space: nowrap;
filter: drop-shadow(2px 2px 4px #0009);
counter-reset: lum var(--val);
&::after { color: #000 }
&.rgb::after {
content:
'rgb(' counter(lum) '%,'
counter(lum) '%,'
counter(lum) '%)'
}
&.hsl::after {
content: 'hsl(0,0%,' counter(lum) '%)'
}
}
datalist {
grid-auto-flow: column;
justify-content: space-between;
color: #fff
}
option {
--m: (var(--n) - 1);
padding: $s;
border-radius: $r;
translate:
calc((var(--i) - .5*var(--m))*(100%/var(--m) + #{$thumb-o}));
background: $c;
filter: drop-shadow(2px 2px 4px #0009);
}
View Compiled
addEventListener('input', e => {
let _t = e.target;
_t.parentNode.style.setProperty('--val', +_t.value)
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.