JSFiddle - React, Tailwind, and code Playground

by erebel55

HTML

<script src="http://dl.dropbox.com/u/40722232/jquery.ui.core.js"></script>
<script src="http://dl.dropbox.com/u/40722232/jquery.ui.mouse.js"></script>
<script src="http://dl.dropbox.com/u/40722232/jquery.ui.slider.js"></script>
<script src="http://dl.dropbox.com/u/40722232/jquery.ui.widget.js"></script>
<html>
<body>
    
<!--Zoom Slider-->    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">    

    <div id="container">
    
        <div id="header">
            <h1>Header Information Here</h1>
        </div>
        
        <div id="slider_vertical">
            <!--<h1>slider</h1>-->
        </div>
        
        <div id = "svg_content">
            <h1>svg content will be here</h1>
        </div>
        
        <!--
        <div id = "tools">
            <h1> Tools Here </h1>
        </div>
        -->

    </div>
</body>
</html>

CSS

body, html {
    height: 100%;
}

#container {
    height: 100%;
}

#header {
    background-color:grey;
    color:white;
}

<!--
#tools {
    background-color:pink;
    height:400px;
    width: 50px;
    float: right;
}
-->

#svg_content {
    margin-right: 20px;
    background-color:blue;
    height: 100%;
}

#slider_vertical {
    margin-left: 2px;
    margin-right: 3px;
    margin-top: 25px;
    height:300px;
    float: right;
}

JavaScript

// zoom slider
$(function() {
    $("#slider_vertical").slider({
        orientation: "vertical",
        range: "min",
        min: 1,
        max: 100,
        value: 1,
    });
    //$("#amount").val($("#slider_vertical").slider("value"));
    //zoom = $("#slider-vertical").slider("value");
});