Karthik N G Karthik N G - 5 months ago 11
jQuery Question

Create a slider to dynamically display distance two lines in an image

enter image description here

I am new jQuery. I want to create a slider which will move the green line along the x axis of the image as you can see in the image. From the image you can see there are two lines (line 1, line 2). I have the values (x,y) of the lines in a JSON objects.

As I move the slider, I want to show the distance between the two lines in the text box provided right next to the image by iterating through the JSON objects provided. I want the distance to change dynamically as I move around the slider over the image.

I came across different kinds of jQuery UI sliders. I couldn't find any examples related to my need. Therefore, asking for help here. Thank you in advance.

Answer

.tooltip {
	width: 1px;
	height: 512;
    position: absolute;
    bottom:100%;
}
<html>
<head>
<title>
	This is an example of slider feature
</title>
</head>
<body>
	<img src="https://s31.postimg.org/vkcjhvwgr/output.png">
	<div class="vr">&nbsp;</div>
	<div id="json-slider"></div>
	<input id="distance" type="text">

<!-- include the jQuery and jQuery UI scripts -->
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">

<script type="text/javascript">

$(function(){
	var ilmJson = [
	[4.0, 113.0],
	[5.0, 114.0],
	[6.0, 114.0],
	[7.0, 114.0],
	[8.0, 113.0],
	[9.0, 114.0],
	[10.0, 114.0],
	[11.0, 114.0],
	[12.0, 114.0],
	[13.0, 114.0],
	[14.0, 114.0],
	[15.0, 114.0],
	[16.0, 114.0],
	[17.0, 114.0],
	[18.0, 115.0],
	[19.0, 115.0],
	[20.0, 115.0],
	[21.0, 115.0],
	[22.0, 115.0],
	[23.0, 115.0],
	[24.0, 114.0],
	[25.0, 114.0],
	[26.0, 115.0],
	[27.0, 115.0],
	[28.0, 115.0],
	[29.0, 115.0],
	[30.0, 115.0],
	[31.0, 115.0],
	[32.0, 115.0],
	[33.0, 116.0],
	[34.0, 116.0],
	[35.0, 116.0],
	[36.0, 115.0],
	[37.0, 116.0],
	[38.0, 116.0],
	[39.0, 116.0],
	[40.0, 116.0],
	[41.0, 116.0],
	[42.0, 116.0],
	[43.0, 116.0],
	[44.0, 116.0],
	[45.0, 116.0],
	[46.0, 116.0],
	[47.0, 116.0],
	[48.0, 116.0],
	[49.0, 116.0],
	[50.0, 116.0],
	[51.0, 116.0],
	[52.0, 116.0],
	[53.0, 116.0],
	[54.0, 116.0],
	[55.0, 116.0],
	[56.0, 116.0],
	[57.0, 116.0],
	[58.0, 117.0],
	[59.0, 117.0],
	[60.0, 117.0],
	[61.0, 117.0],
	[62.0, 117.0],
	[63.0, 117.0],
	[64.0, 117.0],
	[65.0, 117.0],
	[66.0, 117.0],
	[67.0, 117.0],
	[68.0, 117.0],
	[69.0, 117.0],
	[70.0, 117.0],
	[71.0, 117.0],
	[72.0, 117.0],
	[73.0, 117.0],
	[74.0, 117.0],
	[75.0, 117.0],
	[76.0, 117.0],
	[77.0, 117.0],
	[78.0, 117.0],
	[79.0, 117.0],
	[80.0, 117.0],
	[81.0, 117.0],
	[82.0, 117.0],
	[83.0, 117.0],
	[84.0, 117.0],
	[85.0, 117.0],
	[86.0, 117.0],
	[87.0, 118.0],
	[88.0, 118.0],
	[89.0, 118.0],
	[90.0, 117.0]
];

var rpeJson = [
	[4.0, 167.0],
	[5.0, 167.0],
	[6.0, 167.0],
	[7.0, 167.0],
	[8.0, 168.0],
	[9.0, 168.0],
	[10.0, 168.0],
	[11.0, 168.0],
	[12.0, 168.0],
	[13.0, 168.0],
	[14.0, 168.0],
	[15.0, 168.0],
	[16.0, 168.0],
	[17.0, 168.0],
	[18.0, 168.0],
	[19.0, 168.0],
	[20.0, 168.0],
	[21.0, 169.0],
	[22.0, 168.0],
	[23.0, 168.0],
	[24.0, 169.0],
	[25.0, 169.0],
	[26.0, 170.0],
	[27.0, 169.0],
	[28.0, 169.0],
	[29.0, 169.0],
	[30.0, 168.0],
	[31.0, 169.0],
	[32.0, 169.0],
	[33.0, 169.0],
	[34.0, 170.0],
	[35.0, 170.0],
	[36.0, 170.0],
	[37.0, 170.0],
	[38.0, 170.0],
	[39.0, 171.0],
	[40.0, 170.0],
	[41.0, 170.0],
	[42.0, 171.0],
	[43.0, 171.0],
	[44.0, 170.0],
	[45.0, 170.0],
	[46.0, 171.0],
	[47.0, 171.0],
	[48.0, 171.0],
	[49.0, 171.0],
	[50.0, 171.0],
	[51.0, 171.0],
	[52.0, 171.0],
	[53.0, 171.0],
	[54.0, 172.0],
	[55.0, 171.0],
	[56.0, 172.0],
	[57.0, 171.0],
	[58.0, 172.0],
	[59.0, 172.0],
	[60.0, 172.0],
	[61.0, 172.0],
	[62.0, 172.0],
	[63.0, 172.0],
	[64.0, 172.0],
	[65.0, 173.0],
	[66.0, 173.0],
	[67.0, 173.0],
	[68.0, 173.0],
	[69.0, 173.0],
	[70.0, 173.0],
	[71.0, 173.0],
	[72.0, 173.0],
	[73.0, 173.0],
	[74.0, 173.0],
	[75.0, 173.0],
	[76.0, 173.0],
	[77.0, 174.0],
	[78.0, 174.0],
	[79.0, 174.0],
	[80.0, 174.0],
	[81.0, 174.0],
	[82.0, 174.0],
	[83.0, 174.0],
	[84.0, 174.0],
	[85.0, 174.0],
	[86.0, 174.0],
	[87.0, 174.0],
	[88.0, 174.0],
	[89.0, 174.0],
	[90.0, 175.0]
];

$("#json-slider").slider({
	value: 0,
	min: 0,
	max: 1023,
	step: 1,
	slide: function(event, ui){
		var dist = rpeJson[ui.value][1] - ilmJson[ui.value][1];
		$("#distance").val(dist);
		var curValue = ui.value;
		var tooltip = '<div class="tooltip"></div>';

    	$('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
	}
});
});

</script>

</body>
</html>

I could not post the entire JSON here due to some limitations. But the feature is working for me currently. Hopefully, this helps someone.