Skip to content
Snippets Groups Projects
Commit 4a4adb6b authored by Winnie's avatar Winnie
Browse files

Update range slider and remove .idea folder

parent 10946851
No related branches found
No related tags found
No related merge requests found
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!--<link rel="stylesheet" href="/resources/demos/style.css">-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );
</script>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</body>
</html>
\ No newline at end of file
<!--
Double Handle Slider Modified from: http://jqueryui.com/slider/#range
-->
<!DOCTYPE html>
<html lang="en">
<head>
......@@ -7,8 +13,15 @@
<meta name="description" content="insert a description"> <!--TODO-->
<title>TrawlTool</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
<!--JQuery-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- MUST load JQuery Library before loading this-->
<script src="script.js"></script>
<!--Fonts-->
<!--Open Sans Rg-400/Semi-600/Bd-700-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
......@@ -76,21 +89,20 @@
</section>
<section id="yearIn">
Year Range
Year Range:
<span id="fromtoYear">InnerHtml</span>
<form>
<!--TODO: Get proper ranges, make max automatic.-->
<input type="range" id="yearR" value="2000" min="1960" max="2016" oninput="brightR()"><br>
<input type="number" id="fromYear" class="yearN" value="2000" min="1960" max="2016" oninput="brightN()">
-
<input type="number" id ="toYear" class="yearN" value="2000" min="1960" max="2016" oninput="brightN()">
<!--<input type="number" id="fromYear" class="yearN" value="2000" min="1960" max="2016" oninput="brightN()">-->
<div id="slider-range"></div>
</form>
</section>
<section id="outputIn">
<form>
<!--TODO: Set Default button entered-->
<input type="radio" name="gender" value="male"> Map
<input type="radio" name="gender" value="female"> Histogram
<input type="SUBMIT">
<input type="submit">
</form>
<form>
<input type="submit" value="Individual Records"> <!--To records.html-->
......
This diff is collapsed.
// For Range Slider
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 1960,
max: 2016,
values: [ 1960, 2016 ],
slide: function( event, ui ) {
$( "#fromtoYear" ).html(ui.values[ 0 ] + " - " + ui.values[ 1 ] )
}
});
$( "#fromtoYear" ).html($( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ))
} );
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment