JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.frequency-decoder.com/demo/fd-slider/css/fd-slider.mhtml.min.css" />
<p>
        <!-- 
        
        Here's the form element - a select list in this case - that we will 
        associate the forth and final slider with. 
        
        -->
        <select name="selectTest1" id="selectTest1">
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="4">Four</option>
          <option value="8">Eight</option>
          <option value="16">Sixteen</option>
          <option value="32">Thirty Two</option>
          <option value="64">Sixty Four</option>
          <option value="128">One Hundred and Twenty Eight</option>
          <option value="256">Two Hundred and Fifty Six</option>
        </select>  
        <a href="#" onclick="fdSlider.disable('selectTest1'); return false;">Disable</a>
        <a href="#" onclick="fdSlider.enable('selectTest1'); return false;">Enable</a>
      </p>
<script>
      fdSlider.createSlider({
        // Associate the select list
        inp:document.getElementById("selectTest1"),
        // Use the tween animation
        animation:"tween",
        // Keep the form element, in this case a select list, visible
        hideInput:false,
        // Create a vertical slider
        vertical:true,
        // Give it the className "v-s2" which will make the slider 160px high
        classNames:"v-s2"
        });
      </script>

CSS

/* Generic CSS used for the slider demo */
body
        {
        background:#fff;
        color:#333;
        text-align:center;
        font-size:14px;
        font-family:verdana,arial,sans-serif;
        color:#545454;
        padding:0;
        margin:0;
        border:0;
        line-height:1.6em;
        text-shadow:0 1px 0 #fff;
        }
h1,
legend
        { 
        font-weight:lighter;
        font-family:georgia, times new roman, times, serif;
        text-align:center;
        color:#111;
        font-size:2em;
        }
h2
        {
        font-weight:lighter;
        font-family:verdana,arial,sans-serif;
        text-align:center;
        margin:1em 0;
        color:#333;
        text-transform:uppercase;
        letter-spacing:1px;
        font-size:1.2em;
        }
h3
        {
        font-weight:lighter;
        font-family:georgia, times new roman, times, serif;
        text-align:center;
        margin:1em 0;
        color:#868686;
        font-style:oblique;
        font-size:1.2em;
        }
code 
        { 
        font-family:'andale mono', 'lucida console', 'courier new', monospace;
        font-size:12px;
        color:#222;
        text-transform:none;
        }
kbd
        {
        display: inline;
	display: inline-block;
	min-width:1em;
	padding:.2em .3em .3em .3em;
	font: bold .85em/1em "Lucida Grande", Lucida, Arial, sans-serif;
	text-align: center;   		
	text-decoration: none;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: .3em;  	
	cursor: default;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
        background: rgb(230, 230, 230);
	background: -moz-linear-gradient(top, rgb(230,230,230), rgb(245,245,245));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(230,230,230)), to(rgb(245,245,245)));
	color:#222;
        color: rgb(80,80,80);
	text-shadow: 0 1px 0 rgb(255,255,255);
	border:1px solid #ccc;
	border-right:1px solid #aaa;
	border-bottom:1px solid...

JavaScript

/*! Unobtrusive Slider Control / HTML5 Input Range polyfill - MIT/GPL2 @freqdec */
var fdSlider=(function(){var sliders={},uniqueid=0,mouseWheelEnabled=true,fullARIA=true,describedBy="fd-slider-describedby",varSetRules={onfocus:true,onvalue:true},noRangeBar=false,html5Animation="jump",isOpera=Object.prototype.toString.call(window.opera)==="[object Opera]",fpRegExp=/^([-]{0,1}[0-9]+(\.[0-9]+){0,1})$/,stepRegExp=/^([0-9]+(\.[0-9]+){0,1})$/;var parseJSON=function(str){if(typeof str!=="string"||str==""){return{}}try{if(typeof JSON==="object"&&typeof(JSON.parse)==="function"){return JSON.parse(str)}else{if(/mousewheelenabled|fullaria|describedby|norangebar|html5animation|varsetrules/.test(str.toLowerCase())){var f=Function(["var document,top,self,window,parent,Number,Date,Object,Function,","Array,String,Math,RegExp,Image,ActiveXObject;","return (",str.replace(/<\!--.+-->/gim,"").replace(/\bfunction\b/g,"function-"),");"].join(""));return f()}}}catch(e){}return{err:"Could not parse the JSON object"}};var affectJSON=function(json){if(typeof json!=="object"){return}for(key in json){value=json[key];switch(key.toLowerCase()){case"mousewheelenabled":mouseWheelEnabled=!!value;break;case"fullaria":fullARIA=!!value;break;case"describedby":describedBy=String(value);break;case"norangebar":noRangeBar=!!value;break;case"html5animation":html5Animation=String(value).search(/^(jump|tween|timed)$/i)!=-1?String(value).toLowerCase():"jump";break;case"varsetrules":if("onfocus" in value){varSetRules.onfocus=!!value.onfocus}if("onvalue" in value){varSetRules.onvalue=!!value.onvalue}break}}};var addEvent=function(obj,type,fn){if(obj.attachEvent){obj.attachEvent("on"+type,fn)}else{obj.addEventListener(type,fn,true)}};var removeEvent=function(obj,type,fn){try{if(obj.detachEvent){obj.detachEvent("on"+type,fn)}else{obj.removeEventListener(type,fn,true)}}catch(err){}};var...