<div class="container range__width">
<div class="paragraph">
<div class="text">Width</div>
</div>
<div id='demo-controls' class="controls">
<div class="value-tag"></div>
<div class="low-value"></div>
<div class="slider range-width">
<input type="range" name="range-width" value="95" id="text-vf-wdth" class="controls--width" min="85" max="100"> <label for="controls__width">Width</label>
</div>
<div class="high-value"></div>
<div class="current-value"></div>
</div>
</div>
/* Plex Sans Variable Font */
@font-face {
font-family: "Plex Sans VF";
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
format("woff2 supports variations"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
format("woff2-variations");
font-display: swap;
font-weight: 100 700;
font-stretch: 85% 100%;
}
.range__width {
--text-vf-wght: 400;
--text-vf-wdth: 95;
--value-tag: 'wdth';
--low-value: 85;
--current-value: var(--text-vf-wdth);
--high-value: 100;
.paragraph {
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
max-width: 95vw;
width: 45em;
}
.paragraph .text {
font-family: "Plex Sans VF", Helvetica, sans-serif;
font-size: 5rem;
font-weight: var(--text-vf-wght);
font-stretch: calc( var(--text-vf-wdth) * 1% );
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__width .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__width').style.setProperty(`--${this.id}`, this.value);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.