JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="leftPane">
<input id="checkbox1" type="checkbox" checked class='checkbox' />AWS <br>
<input id="checkbox2" type="checkbox" checked class='checkbox'/>Azure<br>
<div class="sectionName">Cost<span class="sectionQ">?</span></div>
<div id="slider1" class="slider">
    <div id="custom-handle1" class="ui-slider-handle"></div>
  </div>
<div class="sectionName">Instances<span class="sectionQ">?</span></div>
<div id="slider2" class="slider">
    <div id="custom-handle2" class="ui-slider-handle"></div>
  </div>
<div class="sectionName">RAM<span class="sectionQ">?</span></div>
<div id="slider3" class="slider">
    <div id="custom-handle3" class="ui-slider-handle"></div>
    <div id="custom-handle3b" class="ui-slider-handle"></div>
  </div>
<div class="sectionName">vCPUs<span class="sectionQ">?</span></div>
<div id="slider4" class="slider">
    <div id="custom-handle4" class="ui-slider-handle"></div>
    <div id="custom-handle4b" class="ui-slider-handle"></div>
  </div>
<a id='buttonLink' target="_blank"><button>show results</button></a>
</div>
<div class="rightPane">
<div id="urlBuilder" class="urlStyle">url goes here</div>
</div>

CSS

.leftPane {
  width: 300px;
  vertical-align: top;
  padding: 40px;
  height: 100%;
  margin-left: calc(50% - 200px);
}
.rightPane {
  width: calc(100% - 360px);
}
.sectionName {
    font-family: sans-serif;
    text-align: center;
    font-size: 18px;
}
span.sectionQ {
    margin-left: 6px;
    position: absolute;
    background: #f7a129;
    border: 1px solid white;
    padding: 4px;
    border-radius: 20px;
    height: 8px;
    width: 8px;
    line-height: 9px;
    margin-top: -2px;
    font-size: 10px;
    color: white;
    box-shadow: 1px 1px #888;
    cursor: pointer;
    transition: .3s;
    opacity: .2;
}
.leftPane:hover .sectionQ {
  opacity: 1;
}
span.sectionQ:hover {
    margin-top: -1px;
    margin-left: 7px;
    box-shadow: 1px 1px transparent;
}
#custom-handle1, #custom-handle2, #custom-handle3, #custom-handle3b, #custom-handle4, #custom-handle4b {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    margin-left: -1.6em;
    text-align: center;
    line-height: 1.6em;
  }
  .urlStyle {
    margin: 20px;
    font-family: sans-serif;
    color: white;
    font-size: 3px;
  }
.slider {
    margin: 34px 0 34px 20px;
}

.ui-slider-handle {
    margin-top: -34px !important;
    background: #2b405c !important;
    color: white !important;
    font-size: 12px;
    border-radius: 10px;
}
.ui-slider-handle:active {
    background: #1686cb !important;
}
.ui-slider-handle:active:before {
    background: #1686cb !important;
}
.ui-slider-handle:active:after {
    background: #1686cb !important;
}

.ui-slider-handle:after {
    content: '';
    display: block;
    width: 3px;
    border: 1px solid white;
    margin-top: 3px;
    height: 20px;
    background: #2b405c;
    margin-left: 16px;
    border-radius: 2px;
}
.ui-slider-handle:before {
    content: '';
    display: block;
    background: #2b405c;
    width: 5px;
    height: 5px;
    position: absolute;
    margin: 16px;
    transform: rotate(45deg);
}

.ui-slider-range {
   ...

JavaScript

$( function() {
  

// build slide1  
    var handle1 = $( "#custom-handle1" );
    $( "#slider1" ).slider({
      value: 650,
      min: 400,
      max: 650,
      orientation: "horizontal",
      range: "min",
      animate: true,
      create: function() {
        handle1.text( $( this ).slider( "value" ));},
      slide: function( event, ui ) {handle1.text( ui.value );}
    });

// build slide2  
    var handle2 = $( "#custom-handle2" );
    $( "#slider2" ).slider({
      value: 4,
      min: 4,
      max: 15,
      orientation: "horizontal",
      range: "max",
      animate: true,
      create: function() {
        handle2.text( $( this ).slider( "value" ));},
      slide: function( event, ui ) {handle2.text( ui.value );}
    });
    
      // build slide3
    var handle3 = $( "#custom-handle3" );
    var handle3b = $("#custom-handle3b");
    $( "#slider3" ).slider({
      values: [32, 392],
      min: 32,
      max: 392,
      orientation: "horizontal",
      range: true,
      animate: true,
      create: function() {
        handle3.text( $( this ).slider( "values", 0 ));
        handle3b.text( $( this ).slider( "values", 1))},
      slide: function( event, ui ) {handle3.text( ui.values[0] ); handle3b.text( ui.values[1]); }
    });
    
      // build slide3
    var handle4 = $( "#custom-handle4" );
    var handle4b = $("#custom-handle4b");
    $( "#slider4" ).slider({
      values: [10, 76],
      min: 10,
      max: 76,
      orientation: "horizontal",
      range: true,
      animate: true,
      create: function() {
        handle4.text( $( this ).slider( "values", 0 ));
        handle4b.text( $( this ).slider( "values", 1))},
      slide: function( event, ui ) {handle4.text( ui.values[0] ); handle4b.text( ui.values[1]); }
    });
    
    
 $('.leftPane').mouseover(function(){
	 updateURL()
 })
 
 $('.checkbox').change(function(){
   updateURL()
 })
 
 function updateURL() {
   	var selection1 = $("#slider1").slider("value");
    var selection2 =...