input event with input[type="range"]

testing to see if using input event works better than change

by mrjordy

HTML

<div class="inline">Line Size: <input id="pencilSlider" type="range" min="1" max="50" value="3" /></div> <div class="pencilSize inline" id="pencilSliderResult"></div>

CSS

.inline {
  display: inline-block;
  vertical-align: middle;
}
input#pencilSlider {
    width: 500px;
    margin: 15px 4px;
}
.pencilSize {
  width: 40px;
  border-radius: 50px;
  background: #f00;
  text-align: center;
  height: 3px;
  width: 3px;
}

JavaScript

var pencilTipSize = document.getElementById("pencilSlider"),
    pencilTipSizeResult = document.getElementById("pencilSliderResult");

pencilTipSize.addEventListener("input", function() {
    $('#pencilSliderResult').css({
    width: pencilTipSize.value,
    height: pencilTipSize.value,
    });
}, false);