jdittrich · November 9, 2016 21:02
diff --git a/sliderprototype.html b/sliderprototype.html
 <!doctype html>
 <html lang="us">
 <head>
 	<!--
 	needs jquery.js, jqueryUI.js, jquerUI.css
 	and an image showing the revision slider bars like http://imgur.com/e7LNEDA
 	-->
 	<meta charset="utf-8">
 	<title>Slider Prototype</title>
 	<link href="jquery-ui.css" rel="stylesheet">
 	<style>
 		div, span{
 			margin:0;
 			padding:0;
 			font-size:14px;
 		}

 		.ui-slider-horizontal .ui-slider-handle{
 			margin-left:-2px;
 			border-radius: 8px;
 			width: 14px;
 			height:14px;
 		}

 		#slider2 .ui-slider-handle{
 			background-color: rgb(41, 119, 236);
 			border:1px solid rgb(26, 77, 153);
 			margin-top:-4px;
 		}

 		#slider1 .ui-slider-handle{
 			margin-top:4px;
 			background-color: rgb(250, 204, 7);
 			border:1px solid rgb(157, 114, 19);
 		}
 	</style>
 </head>
 <body>


 <div id="slidercontainer" style="
 	width:40rem;
 	position:relative;
 	padding:0;
 	margin:0;
 	height:10em;
 	background:silver;
 	left:20px;
 	background-image:url(backgroundbars.png)">

 	<div id="highlight" style="
 		position:absolute;
 		top:0;
 		left:0;
 		height:100%;
 		background:rgba(0,0,0,0.05);
 		border-left:16px solid rgba(214, 175, 6, 0.15);
 		border-right:16px solid rgba(6, 65, 214,0.15);
 		">
 	</div>

 	<div id="slider1" style="
 		position:absolute;
 		left:0;
 		top:50%;
 		margin:0;
 		font-size:10px;
 		border:none;
 		border-bottom: 3px solid rgb(214, 175, 6);
 		background: rgba(214, 175, 6, 0.2);
 		width:100%;
 		">
 	</div>

 	<div id="slider2" style="
 		position:absolute;
 		right:0;
 		top:calc(50% + 12px);
 		margin:0;
 		font-size:10px;
 		border:none;
 		border-top: 3px solid rgb(6, 65, 214);
 		background:rgba(6, 65, 214,0.2);
 		width:100%;
 		">
 	</div>

 </div>
 <script src="jquery.js"></script>
 <script src="jquery-ui.js"></script>
 <script>
 //range

 $slider1=null;
 $slider2=null;
 $container=null;

 //size of the bars in the image
 var barwidth = 16;
 var barsshown = 30;

 var factor = null;

 $( function() {
 	$slider1 = $("#slider1");
 	$slider2 = $("#slider2");
 	$container = $("#slidercontainer");
 	$highlight = $("#highlight");

 	$container.width(barsshown*barwidth);

 	var config={
 		stop:adjustDisplay,
 		slide:adjustDisplay,
 		min:0,
 		max:barsshown,
 		animate:"fast"
 	};

 	factor = $container.width()/barsshown;

 	$slider1.slider(config);//left one
 	$slider2.slider(config);//right one
 	$slider2.slider("option","value",Math.floor(barsshown/2));//right one

 	highlight();
 });


 function adjustDisplay(event,ui){
 	adjustSliders(event, ui); //cares for slider positions
 	highlight(event, ui);
 }

 function adjustSliders(event, ui){
 	//get positions:
 	var value1 = $slider1.slider("value"); //0
 	var value2 = $slider2.slider("value"); //7

 	//set max
 	//var slider1max = value2-1;
 	//$slider1.slider("option","max", slider1max); //6

 	//set min
 	//var slider2min = value1+1;
 	//$slider2.slider("option","min", slider2min); //1


 	//== Restricts slider width ==
 	// find a factor to convert one step to a corresponding horizontal distance
 	//$slider1.css("width", (slider1max- 0)*factor+"px");
 	//$slider2.css("width", (barsshown - slider2min)*factor+"px");

 	// == shows value in pointers (for debugging) ==
 	// $slider1.find("span").text(value1);
 	// $slider2.find("span").text(value2);

 	// == pushes the respective other slider
 	//console.log("v1",value1," ","v2:",value2);
 	//console.log("before		","v1",$slider1.slider("value")," ","v2:",$slider2.slider("value"));

 	if(event.target === $slider1[0] && (ui.value >= value2))  { //if we move slider1, we may need to push slider 2 to the right
 		$slider2.slider("option","value", ui.value+1);
 	}

 	if(event.target === $slider2[0] && (ui.value <= value1))  { //if we move slider2, we may need to push slider 1 to the left
 		$slider1.slider("option","value", ui.value-1);
 		console.log(ui.value, value1, value2);
 	}
 }

 function highlight(event, ui){
 	//highlights compared revisions and in-between ones
 	$highlight.css({
 		left:($slider1.slider("value"))*factor+"px",
 		width:($slider2.slider("value")-$slider1.slider("value"))*factor-barwidth+"px",
 		//"margin-left":Math.floor(barwidth/2)
 	});

 };

 </script>
 </body>
 </html>
	<!doctype html>
	<html lang="us">
	<head>
	<!--
	needs jquery.js, jqueryUI.js, jquerUI.css
	and an image showing the revision slider bars like http://imgur.com/e7LNEDA
	-->
	<meta charset="utf-8">
	<title>Slider Prototype</title>
	<link href="jquery-ui.css" rel="stylesheet">
	<style>
	div, span{
	margin:0;
	padding:0;
	font-size:14px;
	}

	.ui-slider-horizontal .ui-slider-handle{
	margin-left:-2px;
	border-radius: 8px;
	width: 14px;
	height:14px;
	}

	#slider2 .ui-slider-handle{
	background-color: rgb(41, 119, 236);
	border:1px solid rgb(26, 77, 153);
	margin-top:-4px;
	}

	#slider1 .ui-slider-handle{
	margin-top:4px;
	background-color: rgb(250, 204, 7);
	border:1px solid rgb(157, 114, 19);
	}
	</style>
	</head>
	<body>


	<div id="slidercontainer" style="
	width:40rem;
	position:relative;
	padding:0;
	margin:0;
	height:10em;
	background:silver;
	left:20px;
	background-image:url(backgroundbars.png)">

	<div id="highlight" style="
	position:absolute;
	top:0;
	left:0;
	height:100%;
	background:rgba(0,0,0,0.05);
	border-left:16px solid rgba(214, 175, 6, 0.15);
	border-right:16px solid rgba(6, 65, 214,0.15);
	">
	</div>

	<div id="slider1" style="
	position:absolute;
	left:0;
	top:50%;
	margin:0;
	font-size:10px;
	border:none;
	border-bottom: 3px solid rgb(214, 175, 6);
	background: rgba(214, 175, 6, 0.2);
	width:100%;
	">
	</div>

	<div id="slider2" style="
	position:absolute;
	right:0;
	top:calc(50% + 12px);
	margin:0;
	font-size:10px;
	border:none;
	border-top: 3px solid rgb(6, 65, 214);
	background:rgba(6, 65, 214,0.2);
	width:100%;
	">
	</div>

	</div>
	<script src="jquery.js"></script>
	<script src="jquery-ui.js"></script>
	<script>
	//range

	$slider1=null;
	$slider2=null;
	$container=null;

	//size of the bars in the image
	var barwidth = 16;
	var barsshown = 30;

	var factor = null;

	$( function() {
	$slider1 = $("#slider1");
	$slider2 = $("#slider2");
	$container = $("#slidercontainer");
	$highlight = $("#highlight");

	$container.width(barsshown*barwidth);

	var config={
	stop:adjustDisplay,
	slide:adjustDisplay,
	min:0,
	max:barsshown,
	animate:"fast"
	};

	factor = $container.width()/barsshown;

	$slider1.slider(config);//left one
	$slider2.slider(config);//right one
	$slider2.slider("option","value",Math.floor(barsshown/2));//right one

	highlight();
	});


	function adjustDisplay(event,ui){
	adjustSliders(event, ui); //cares for slider positions
	highlight(event, ui);
	}

	function adjustSliders(event, ui){
	//get positions:
	var value1 = $slider1.slider("value"); //0
	var value2 = $slider2.slider("value"); //7

	//set max
	//var slider1max = value2-1;
	//$slider1.slider("option","max", slider1max); //6

	//set min
	//var slider2min = value1+1;
	//$slider2.slider("option","min", slider2min); //1


	//== Restricts slider width ==
	// find a factor to convert one step to a corresponding horizontal distance
	//$slider1.css("width", (slider1max- 0)*factor+"px");
	//$slider2.css("width", (barsshown - slider2min)*factor+"px");

	// == shows value in pointers (for debugging) ==
	// $slider1.find("span").text(value1);
	// $slider2.find("span").text(value2);

	// == pushes the respective other slider
	//console.log("v1",value1," ","v2:",value2);
	//console.log("before ","v1",$slider1.slider("value")," ","v2:",$slider2.slider("value"));

	if(event.target === $slider1[0] && (ui.value >= value2)) { //if we move slider1, we may need to push slider 2 to the right
	$slider2.slider("option","value", ui.value+1);
	}

	if(event.target === $slider2[0] && (ui.value <= value1)) { //if we move slider2, we may need to push slider 1 to the left
	$slider1.slider("option","value", ui.value-1);
	console.log(ui.value, value1, value2);
	}
	}

	function highlight(event, ui){
	//highlights compared revisions and in-between ones
	$highlight.css({
	left:($slider1.slider("value"))*factor+"px",
	width:($slider2.slider("value")-$slider1.slider("value"))*factor-barwidth+"px",
	//"margin-left":Math.floor(barwidth/2)
	});

	};

	</script>
	</body>
	</html>