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' />
<input id="checkbox2" type="checkbox" checked class='checkbox'/>
  <div id="slider1" class="slider">
    <div id="custom-handle1" class="ui-slider-handle"></div>
  </div>
  <div id="slider2" class="slider">
    <div id="custom-handle2" class="ui-slider-handle"></div>
  </div>
<a id='buttonLink'><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;
  display: inline-block;
  padding-right: 40px;
  border-right: 1px solid red;
  height: 100%;
}
.rightPane {
  display: inline-block;
  width: calc(100% - 360px);
}

#custom-handle1, #custom-handle2, #custom-handle3 {
    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: red;
  }
  .slider {
    margin: 10px 0 30px 20px;
  }

JavaScript

$( function() {
  
  // build slide1 
    var handle1 = $( "#custom-handle1" );
    $( "#slider1" ).slider({
      value: 50,
      min: 0,
      max: 50,
      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: 50,
      min: 0,
      max: 50,
      orientation: "horizontal",
      range: "min",
      animate: true,
      create: function() {
        handle2.text( $( this ).slider( "value" ));},
      slide: function( event, ui ) {handle2.text( ui.value );}
    });
    
    
 $('.slider').mouseup(function(){
	 updateURL()
 })
 
 $('.checkbox').change(function(){
   updateURL()
 })
 
 function updateURL() {
   	var selection1 = $("#slider1").slider("value");
    var selection2 = $("#slider2").slider("value");
    if ($('#checkbox1').is(':checked')) {var checkbox1 = "AWS";} else {var checkbox1 = "NoAWS";}
    if ($('#checkbox2').is(':checked')) {var checkbox2 = "Azure";} else {var checkbox2 = "NoAzure";}
    
    var urlHTML = "https://www.google.com/search?&q=search+"+selection1+"+"+selection2+"+"+checkbox1+"+" + checkbox2;
  	$("#urlBuilder").html(urlHTML);
  	$("#buttonLink").attr('href', urlHTML)
 }

} );