crabosse0 crabosse0 - 1 year ago 107
Javascript Question

Slide on calculate

I'm writting calculate now. And for example, when we change number width in left block on 750, in right block we would see 900, but when we change number of length in left block on 2000, in right block we would see also 2000. How to combine two sliders? This sliders are independent now.



$(document).ready(function() {
$("#mySlider").slider({
range: "min",
min: 0,
max: 750,
value: 750,
slide: function(event, ui) {
$("#total").val(ui.value);
}
});
$("#total").val($("#mySlider").slider("value"));

$("#rangeSlider").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 3000,
value: 3000,
slide: function(event, ui) {
$("#tot").val(ui.value);
}
});
$("#tot").val($("#rangeSlider").slider("value"));

$("#mySlider1").slider({
range: "min",
min: 0,
max: 900,
value: 900,
slide: function(event, ui) {
$("#total1").val(ui.value);
}
});
$("#total1").val($("#mySlider1").slider("value"));

$("#rangeSlider1").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 3000,
value: 3000,
slide: function(event, ui) {
$("#tot1").val(ui.value);
}
});
$("#tot1").val($("#rangeSlider1").slider("value"));
});

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" />


<div class="before" style="display: inline-block; margin-right: 20px;">
<p>
<label for="tot"> Length:</label>
<input type="text" id="tot" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>

<div id="rangeSlider" style="height:250px; display: inline-block;"></div>

<img src="123.png" alt="">

<p>
<label for="total">Width:</label>
<input type="text" id="total" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="mySlider" style="width: 230px"></div>
</div>

<div class="after" style="display: inline-block;">
<p>
<label for="tot1"> Length:</label>
<input type="text" id="tot1" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>

<div id="rangeSlider1" style="height:250px; display: inline-block;"></div>

<img src="123.png" alt="">

<p>
<label for="total1">Width:</label>
<input type="text" id="total1" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="mySlider1" style="width: 230px"></div>
</div>




Answer Source

You could update value of the slider that you need to sync with, using value setter $( ".selector" ).slider( "option", "value", 10 );

Here is the working code for your example

$(document).ready(function() {
	var $total = $("#total");
	var $total1 = $("#total1");
	var $tot = $("#tot");
	var $tot1 = $("#tot1");
	
        var mySlider = $( "#mySlider" ).slider({
          range: "min",
          min: 0,
          max: 750,
          value: 750,
          slide: function( event, ui ) { 
			mySlider1.slider( "option", "value", ui.value + 150 );
			$total.val(  ui.value );	  
          },
		  change: function(event, ui){
            $total.val(  ui.value );			  
		  }	
        });
        $total.val( mySlider.slider( "value" ) );
        
	    var mySlider1 = $( "#mySlider1" ).slider({
          range: "min",
          min: 0,
          max: 900,
          value: 900,
          slide: function( event, ui ) {
			mySlider.slider( "option", "value", ui.value - 150 ); 
			$total1.val(  ui.value );	  
          },
		  change: function(event, ui){
            $total1.val(  ui.value );			  
		  }	
        });
        $total1.val( mySlider1.slider( "value" ) );
	
        var rangeSlider = $( "#rangeSlider" ).slider({
          orientation: "vertical",
          range: "min",
          min: 0,
          max: 3000,
          value: 3000,
          slide: function( event, ui ) {
            $tot.val( ui.value );
			rangeSlider1.slider("option","value", ui.value);  
          },
		  change: function(event, ui){
			$tot.val( ui.value );  
		  }	
        });
        $tot.val( rangeSlider.slider( "value" ) );
           
        var rangeSlider1 = $( "#rangeSlider1" ).slider({
          orientation: "vertical",
          range: "min",
          min: 0,
          max: 3000,
          value: 3000,
          slide: function( event, ui ) {
            $tot1.val( ui.value );
			rangeSlider.slider("option","value", ui.value);    
          },
		  change: function(event, ui){
			$tot1.val( ui.value );  
		  }	
        });
        $tot1.val( rangeSlider1.slider( "value" ) );             
    });
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />	
  <title>jQuery UI : Slider with Minimum Range</title>
</head>	
<body>
<div class="before" style="display: inline-block; margin-right: 20px;">
  <p>
    <label for="tot"> Length:</label>
    <input type="text" id="tot" style="border:0; color:#fa4b2a; font-weight:bold;">
  </p>
   
  <div id="rangeSlider" style="height:250px; display: inline-block;"></div>

  <img src="123.png" alt="">

  <p>
    <label for="total">Width:</label>
    <input type="text" id="total" style="border:0; color:#fa4b2a; font-weight:bold;">
  </p>
  <div id="mySlider" style="width: 230px"></div>
</div>

<div class="after" style="display: inline-block;">
  <p>
    <label for="tot1"> Length:</label>
    <input type="text" id="tot1" style="border:0; color:#fa4b2a; font-weight:bold;">
  </p>
   
  <div id="rangeSlider1" style="height:250px; display: inline-block;"></div>

  <img src="123.png" alt="">

  <p>
    <label for="total1">Width:</label>
    <input type="text" id="total1" style="border:0; color:#fa4b2a; font-weight:bold;">
  </p>
  <div id="mySlider1" style="width: 230px"></div>
</div>
 R	
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
	<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</body>
</html>

Here is a jsbin of the above code https://jsbin.com/tejilo/edit?html,output

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download