JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>
  <h1>
    Secret Decoder
  </h1>
  <input class='slider' max='26' min='0' name='points' type='range' value='0'>
</header>
<div class='wheel-outer'>
  <div class='wheel'>
    <div class='plaintext'>
      <span class='letter-plaintext-0' data-rotation='0.0'>
        a
      </span>
      <span class='letter-plaintext-1' data-rotation='13.8461538462'>
        b
      </span>
      <span class='letter-plaintext-2' data-rotation='27.6923076924'>
        c
      </span>
      <span class='letter-plaintext-3' data-rotation='41.538461538600004'>
        d
      </span>
      <span class='letter-plaintext-4' data-rotation='55.3846153848'>
        e
      </span>
      <span class='letter-plaintext-5' data-rotation='69.230769231'>
        f
      </span>
      <span class='letter-plaintext-6' data-rotation='83.07692307720001'>
        g
      </span>
      <span class='letter-plaintext-7' data-rotation='96.9230769234'>
        h
      </span>
      <span class='letter-plaintext-8' data-rotation='110.7692307696'>
        i
      </span>
      <span class='letter-plaintext-9' data-rotation='124.6153846158'>
        j
      </span>
      <span class='letter-plaintext-10' data-rotation='138.461538462'>
        k
      </span>
      <span class='letter-plaintext-11' data-rotation='152.3076923082'>
        l
      </span>
      <span class='letter-plaintext-12' data-rotation='166.15384615440001'>
        m
      </span>
      <span class='letter-plaintext-13' data-rotation='180.0000000006'>
        n
      </span>
      <span class='letter-plaintext-14' data-rotation='193.8461538468'>
        o
      </span>
      <span class='letter-plaintext-15' data-rotation='207.692307693'>
        p
      </span>
      <span class='letter-plaintext-16' data-rotation='221.5384615392'>
        q
      </span>
      <span class='letter-plaintext-17' data-rotation='235.3846153854'>
        r
     ...

CSS

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 13.2px 0;
  transition: 0.5s ease;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(106, 135, 204, 0.7);
  border: 0px solid #000;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #050000, 0px 0px 1px #1f0000;
  border: 2.2px solid #000000;
  height: 39px;
  width: 19px;
  background: rgba(106, 135, 204, 0.7);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -13.9px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(106, 135, 204, 0.7);
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(106, 135, 204, 0.7);
  border: 0.7px solid #562425;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #050000, 0px 0px 1px #1f0000;
  border: 2.2px solid #000000;
  height: 39px;
  width: 19px;
  background: rgba(106, 135, 204, 0.7);
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 12.6px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: rgba(106, 135, 204, 0.7);
  border: 0.7px solid rgba(106, 135, 204, 0.7);
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
  background: rgba(106, 135, 204, 0.7);
  border: 0.7px solid #562425;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #050000, 0px 0px 1px #1f0000;
  border: 2.2px solid #000000;
  height: 39px;
  width: 19px;
  background: rgba(106, 135, 204, 0.7);
  cursor: pointer;
  height: 12.6px;
}

input[type=range]:focus::-ms-fill-lower {
  background:...

CoffeeScript

move_cipher = (offset) ->
  $('.ciphertext span').each (i, v) ->
    rotation = parseInt($(v).data('rotation'))
    new_rotation = rotation + 13.8461538462 * offset
    rule = "rotate(#{new_rotation}deg)"
    $(v).css
      '-webkit-transform': rule
      '-moz-transform': rule
      '-ms-transform': rule
      '-o-transform': rule
      'transform': rule

$('.slider').change (elem) ->
  offset = parseInt($(this).val())
  $('.text').val offset
  move_cipher offset