<h2>Change the outline-offset value using the slider</h2>
<div class="box"></div>
<input type="range" min="0" max="40" id="o" value="0">
<output>offset value: 0px</output>
body {
padding: 40px;
text-align: center;
}
h2 {
margin: 0 0 60px;
}
.box {
width: 200px;
height: 200px;
background: #ccc;
margin: auto;
border: solid 8px yellow;
outline: solid 8px orange;
}
input {
margin-top: 120px;
width: 200px;
}
output {
display: block;
margin-top: 40px;
}
var o = document.querySelector('.box'),
oRange = document.getElementById('o');
oRange.addEventListener('input', function () {
o.style.outlineOffset = this.value + 'px';
document.querySelector('output').textContent = 'offset value: ' + this.value + 'px';
}, false);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.