<div class="container range__slant">
<div class="paragraph">
<div class="text">Slant</div>
</div>
<div id='demo-controls' class="controls">
<div class="value-tag"></div>
<div class="low-value"></div>
<div class="slider range-slant">
<input type="range" name="range-slant" value="9" id="text-vf-slnt" class="controls--slant" min="0" max="12"> <label for="controls__slant">Slant</label>
</div>
<div class="high-value"></div>
<div class="current-value"></div>
</div>
</div>
/* Roboto Variable Font */
@font-face {
font-family: "Roboto VF";
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Roboto-VF.woff2")
format("woff2 supports variations"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Roboto-VF.woff2")
format("woff2-variations");
font-display: swap;
font-weight: 100 900;
font-stretch: 75% 100%;
font-style: oblique 0deg 12deg;
}
.range__slant {
--text-vf-wght: 400;
--text-vf-wdth: 95;
--text-vf-slnt: 9;
--value-tag: 'slnt';
--low-value: 0;
--current-value: var(--text-vf-slnt);
--high-value: 12;
.paragraph {
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
max-width: 95vw;
width: 45em;
}
.paragraph .text {
font-family: "Roboto VF", Helvetica, sans-serif;
font-size: 5rem;
font-weight: var(--text-vf-wght);
font-stretch: calc( var(--text-vf-wdth) * 1% );
font-style: oblique calc( var(--text-vf-slnt) * 1deg);
line-height: 7rem;
margin: 0 auto 0 auto;
text-align: center;
}
/* Control buttons */
.controls {
display: grid;
grid-template-columns: min-content 1fr min-content;
margin: 2em auto;
text-align: center;
width: 20rem;
h3 {
display: inline;
font-weight: normal;
font-family: monospace;
}
label {
float: left;
height: 1px;
text-indent: -999em;
visibility: hidden;
}
.slider {
grid-column: 2/3;
input {
width: 100%;
}
}
.value-tag {
grid-column: span 3;
font-weight: bold;
margin-bottom: 0.5rem;
text-align: left;
&::before {
counter-reset: tag var(--value-tag);
content: "'" var(--value-tag) "' range";
font-family: sans-serif;
}
}
.low-value {
grid-column: 1/2;
text-align: left;
width: 2.5rem;
&::before {
counter-reset: tag var(--low-value);
content: counter(tag);
font-family: sans-serif;
}
}
.high-value{
grid-column: 4/5;
text-align: right;
width: 2.5rem;
&::before {
counter-reset: tag var(--high-value);
content: counter(tag);
font-family: sans-serif;
}
}
.current-value {
grid-column: 2/3;
&::before {
counter-reset: tag var(--current-value);
border: solid 1px black;
content: counter(tag);
display: inline-block;
font-family: sans-serif;
min-width: 3rem;
margin: 0 auto;
padding: 0.25rem 0.25rem 0.2rem 0.25rem;
}
}
}
}
View Compiled
// get the inputs
const inputs = [].slice.call(document.querySelectorAll('.range__slant .controls input'));
// listen for changes
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
function handleUpdate(e) { document.querySelector('.range__slant').style.setProperty(`--${this.id}`, this.value);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.