Controls html5 range slider

_.md

[ Launch: html5 range slider ] 7ffe43cdb762e26dc8d4 by rickdg
[ Launch: html5 range slider ] 6455098 by enjalot

config.json

{"description":"Controls html5 range slider","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sliders.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"inline-console":true,"thumbnail":"http://i.imgur.com/ubkf2Lf.png","ajax-caching":true}

inlet.js

var slider1 = d3.select("#slider1")
.attr({
  min: 0,
  max: 100,
  value: 2,
  step: 1
})
.on("change", function() {
  console.log(this.value);
})

var slider2 = d3.select("#slider2")
.attr({
  min: 0,
  max: 10,
  value: 5,
  step: 0.1
})
.on("change", function() {
  console.log(this.value);
})

sliders.html

<input id=slider1 class="slider" type="range"></input>
<input id=slider2 class="slider" type="range"></input>

style.css

#slider1 {
  position:absolute;
  left: 100px;
  top: 150px;
}

#slider2 {
  position:absolute;
  left: 100px;
  top: 300px;
}

#display .slider {
  /* clear tributary's styles */
  -webkit-border-radius: 0;
  -webkit-box-shadow: none;
  -webkit-transition: none;
  background-image: none;
  transition: none;
  border: none;
  margin: 0;
  padding: 0;
  
  /* styling */
  -webkit-appearance: none;
  height: 20px;
  background-color: #fff;
}
#display .slider:hover {
  background-image: none;
  border: none;
  background-color: #F5FEFF;
}
#display .slider:active {
  background-image: none;
  border: none;
  background-color: #F0EBFF;
}
#display .slider:focus {
  background-image: none;
  border: none;
  background-color: #FCFAFF;
}

#display .slider::-webkit-slider-thumb {  
  -webkit-appearance: none;  
  appearance: none;
  
  background-color: #444;  
  width: 10px;  
  height: 27px;
}
#display .slider::-webkit-slider-thumb:hover {
  background-color: #240064;
}