<input id="radial-1" value="100" type="range" min="-50" max="150">
<div>
<input id="radial-2" value="100" type="range" min="-50" max="150" style="-webkit-appearance: slider-vertical;transform: rotate(.5turn);" orient="vertical">
<div class="demo"></div>
<input id="radial-3" value="0" type="range" min="-50" max="150" style="-webkit-appearance: slider-vertical; transform: rotate(.5turn);" orient="vertical">
</div>
<input id="radial-4" value="0" type="range" min="-50" max="150">
.demo {
inline-size: 75vmin;
block-size: 75vmin;
border-radius: 1ch;
--cyanHSL: 180 100% 50%;
--pinkHSL: 328 100% 54%;
background-color: rebeccapurple;
background-image:
radial-gradient(
circle at var(--radial-1, 100%) var(--radial-3, 0%),
hsl(var(--cyanHSL)), hsl(var(--cyanHSL) / 0%)
),
radial-gradient(
circle at var(--radial-4, 0%) var(--radial-2, 100%),
hsl(var(--pinkHSL)), hsl(var(--pinkHSL) / 0%)
)
;
}
div {
display: grid;
grid: 1fr / min-content 1fr min-content;
}
html {
block-size: 100%;
inline-size: 100%;
}
body {
min-block-size: 100%;
min-inline-size: 100%;
margin: 0;
box-sizing: border-box;
display: grid;
place-content: center;
font-family: system-ui;
}
document
.querySelectorAll('input')
.forEach(input => {
input.addEventListener('input', e =>
document.body.style.setProperty(
'--'+e.target.id,
e.target.value + '%'
))
})
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.