<div class="normal">I'm a normal element</div>
<input type="range" min="0" max="100" data-for="normal" />
<div class="throttled">I'm a throttled element</div>
<input type="range" min="0" max="100" data-for="throttled" />
<div class="debounced">I'm a debounced element</div>
<input type="range" min="0" max="100" data-for="debounced" />
body {
font-family: 'Montserrat', sans-serif;
}
div {
background: #0092E0;
box-sizing: border-box;
color: #fff;
margin-bottom: 1em;
overflow: hidden;
padding: 1em;
text-overflow: ellipsis;
white-space: nowrap;
width: 50%;
}
[type="range"] {
margin-bottom: 2em;
width: 100%;
}
var resizeElements = function resizeElements (event) {
var target = $(event.target),
relatedTo = target.data('for');
$('.' + relatedTo).css('width', this.value + '%')
console.log(relatedTo);
}
$('[data-for="normal"]').on('input', resizeElements);
$('[data-for="throttled"]').on('input', _.throttle(resizeElements, 100));
$('[data-for="debounced"]').on('input', _.debounce(resizeElements, 100));