Whitehead Wheel

Whitehead Wheel

by Jacob Turner

HTML

<script src="https://cdn.rawgit.com/twbs/bootstrap/master/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/seiyria/bootstrap-slider/master/dist/bootstrap-slider.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/master/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/seiyria/bootstrap-slider/master/dist/css/bootstrap-slider.min.css">
<input id="wheelSlider" data-slider-id='wheelSlider' type="text" data-slider-min="0" data-slider-max="360" data-slider-step="1" data-slider-value="0" />
<img class="img-responsive" src="http://i.imgur.com/u9rxuZK.png" id="wheel" />

CSS

#wheelSlider {
  width: 95%;
  margin: 0 2.5%;
}

JavaScript

$('#wheelSlider').slider();
$("#wheelSlider").on("slide", function(slideEvt) {
  $("#wheel").css("transform", "rotate(" + slideEvt.value + "deg)");
});