Multiple UI range Slider Cross Actions

by Faisal Khan Janjua

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<p>
	<label for="amountA">Price range:</label>
	<input type="text" id="amountA" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-rangeA"></div>

<p>
	<label for="amountB">Price range:</label>
	<input type="text" id="amountB" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-rangeB" class="sliderB"></div>

CSS

body {
	font-family: Arial, Helvetica, sans-serif;
}
table {
	font-size: 1em;
}
.ui-draggable, .ui-droppable {
	background-position: top;
}

JavaScript

$( function() {
		$( "#slider-rangeA" ).slider({
			range: true,
			min: 0,
			max: 500,
			values: [ 75, 300 ],
			change: function( event, ui ) {
      	console.log(ui.values[ 0 ] + "  :  " + ui.values[ 1 ]);
        $("#slider-rangeB").slider('values',0,ui.values[ 0 ]);
        $("#slider-rangeB").slider('values',1,ui.values[ 1 ]);
        
        console.log($("#slider-rangeB").slider('values',0)+"  -  "+$("#slider-rangeB").slider('values',1));
			}
		});
		$( "#amountA" ).val( "$" + $( "#slider-rangeA" ).slider( "values", 0 ) +
			" - $" + $( "#slider-rangeA" ).slider( "values", 1 ) );

		$( "#slider-rangeB" ).slider({
			range: true,
			min: 0,
			max: 500,
			values: [ 75, 300 ],
			slide: function( event, ui ) {
				$( "#amountB" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
			}
		});
		$( "#amountB" ).val( "$" + $( "#slider-rangeA" ).slider( "values", 0 ) +
			" - $" + $( "#slider-rangeA" ).slider( "values", 1 ) );

      
	});