input(type="range" value="255" min="0" max="255").slider#R
input(type="range" value="255" min="0" max="255").slider#G
input(type="range" value="255" min="0" max="255").slider#B
p#output rgb(255, 255, 255) <br /> #f0f0f0
style#hack

@mixin Anims($time) {
  -webkit-transition: all $time;
  -moz-transition: all $time;
  -ms-transition: all $time;
  -o-transition: all $time;
  transition: all $time;
}
 
@mixin Transform($type) {
  -webkit-transform: $type;
  -moz-transform: $type;
  -ms-transform: $type;
  -o-transform: $type;
  transform: $type;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400|Dosis:200,300,400);

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding-top: 20px;
  background: #f0f0f0;
}

p {
  margin: 40px auto;
  padding: 0;
  display: block;
  position: relative;  
  width: 400px;
  height: auto;
  font: {
    family: Open Sans;
    weight: 300;
    size: 1.7em;
  }
  text-align: center;
  line-height: 30px;
  color: #111;
}

.slider {
  margin: 10px auto;
  padding: 0;
  display: block;
  position: relative;
  width: 255px;
  height: 40px;
  background: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/*
Pseudo element cross browser support.
These do not stack kindly with eachother, so mixin to the rescue.
*/

@mixin Track() {
  padding: 0 1px;
  width: 255px;
  height: 18px;
  background: #dcdcdc;
  border: none;
  border-radius: 16px;
}

.slider::-webkit-slider-runnable-track {@include Track();}
.slider::-moz-range-track {@include Track();}
.slider::-ms-track {@include Track();}

@mixin Thumb() {
  margin-top: 1px;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #FF1493;
  overflow: hidden;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  @include Thumb();
}
.slider::-moz-range-thumb {@include Thumb();}
.slider::-ms-thumb {@include Thumb();}

.slider:focus {
  outline: none;
}

.slider:focus::-webkit-slider-runnable-track {}

/*
I really love these updating their colour according to their current value.
These aren't in the DOM, so jQuery can't target them. I've used a really awful hack in the JS below to make it work.
Once again, pseudo elements do not stack kindly.
*/

#R::-webkit-slider-thumb {background: rgb(240, 0, 0);}
#R::-moz-range-thumb {background: rgb(240, 0, 0);}
#R::-ms-thumb {background: rgb(240, 0, 0);}


#G::-webkit-slider-thumb {background: rgb(0, 240, 0);}
#G::-moz-range-thumb {background: rgb(0, 240, 0);}
#G::-ms-thumb {background: rgb(0, 240, 0);}

#B::-webkit-slider-thumb {background: rgb(0, 0, 240);}
#B::-moz-range-thumb {background: rgb(0, 0, 240);}
#B::-ms-thumb {background: rgb(0, 0, 240);}

function rgbToHex(r, g, b) {
  "use strict";
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

$('.slider').on("input change", function () {
  "use strict";
  var R, G, B, hex;
  
  R = $('#R').val();
  G = $('#G').val();
  B = $('#B').val();
  hex = rgbToHex(parseInt(R, 10), parseInt(G, 10), parseInt(B, 10));
  
  
  $('body').css('background', 'rgb(' + R + ', ' + G + ', ' +  B + ')');
  $('p').css('color', 'rgb(' + (255 - R) + ', ' + (255 - G) + ', ' +  (255 - B) + ')');
  $('#output').html('rgb(' + R + ', ' + G + ', ' + B + ')<br />' + hex);
  
  /*
  By reparsing the styles I can effectively target non-DOM elements.
  This is really bad semantics though.
  Cross browser style support makes this an absolute mess.
  */
  
  $('#hack')
    .empty()
    .append('#R::-webkit-slider-thumb {background: rgb(' + R + ', 0, 0);} #G::-webkit-slider-thumb {background: rgb(0, ' + G +', 0);} #B::-webkit-slider-thumb {background: rgb(0, 0, ' + B + ');}')
    .append('#R::-moz-range-thumb {background: rgb(' + R + ', 0, 0);} #G::-moz-range-thumb {background: rgb(0, ' + G +', 0);} #B::-moz-range-thumb {background: rgb(0, 0, ' + B + ');}')
    .append('#R::-ms-thumb {background: rgb(' + R + ', 0, 0);} #G::-ms-thumb {background: rgb(0, ' + G +', 0);} #B::-ms-thumb {background: rgb(0, 0, ' + B + ');}')
});