更改输入并在ui滑块中滑动

Question

I have got two sliders and inputs. When we changing number in the top now, number and slide in the bottom block don't change. What should I complete?

 $(document).ready(function() { var $doorwayWidth = $(".js-doorway-width"); // ширина var $doorWidthDisable = $(".js-door-width"); // ширина disable var $doorwayHeight = $(".js-doorway-height"); // высота var $doorHeightDisable = $(".js-door-height"); // высота disable var doorwayWidthSlider = $( "#doorwayWidthSlider" ).slider({ range: "min", min: 650, step: 50, max: 1000, value: 1000, slide: function( event, ui ) { var totalWidth = ui.value ; $doorwayWidth.val( ui.value ); var doorSize = calcDoorSize(totalWidth); doorWidthSlider.slider("option","value", doorSize[0]); }, change: function(event, ui){ $doorwayWidth.val( ui.value ); } }); $doorwayWidth.val( doorwayWidthSlider.slider( "value" ) ); $doorwayWidth.val(700).focusout(function() { $( "#doorwayWidthSlider" ).slider("value", this.value); }).focusout(); var doorWidthSlider = $( "#doorWidthSlider" ).slider({ range: "min", disabled: true, min: 600, step: 100, max: 900, value: 900, change: function(event, ui){ $doorWidthDisable.val( ui.value ); } }); $doorWidthDisable.val( doorWidthSlider.slider( "value" ) ); var sliderOptions = [ { minWidth: 650, maxWidth: 700, minHeight: 2040, maxHeight: 2080, doorWidth: 600, doorHeight: 2000 }, { minWidth: 750, maxWidth: 800, minHeight: 2040, maxHeight: 2080, doorWidth: 700, doorHeight: 2000 }, { minWidth: 850, maxWidth: 900, minHeight: 2040, maxHeight: 2080, doorWidth: 800, doorHeight: 2000 }, { minWidth: 950, maxWidth: 1000, minHeight: 2040, maxHeight: 2080, doorWidth: 900, doorHeight: 2000 } ]; function calcDoorSize(totalWidth) { var doorWidth = null; for (var i = 0; i < sliderOptions.length; i++) { if (totalWidth >= sliderOptions[i].minWidth && totalWidth <= sliderOptions[i].maxWidth) { doorWidth = sliderOptions[i].doorWidth; break; } } return [ doorWidth]; } }); 

 <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> <div> <label>Width</label> <input class="js-doorway-width" name="calculatorPvhSquare" type="text"> </div> <div> <div id="doorwayHeightSlider"></div> <img src="" alt=""> <div id="doorwayWidthSlider"></div> </div> </div> <div> <div> <label>Width</label> <input class="js-door-width" type="text" disabled> </div> <div> <div id="doorHeightSlider"></div> <img src="" alt=""> <div id="doorWidthSlider" ></div> </div> </div> 

Answer 1

You gotta write an onkeyupfunction to trigger the function while you writing new value into the input and the function is going to change the sliders.

$('.js-doorway-width').keyup(function(){
      $('#doorwayWidthSlider').slider('value',$('.js-doorway-width').val());
    });

This is the Demo

Answer 2

You can update focusout event of $doorwayWidth to the following to recalculate doorSize and set slider value for doorWidthSlider .

$doorwayWidth.val(700).focusout(function () {
    $("#doorwayWidthSlider").slider("value", this.value);
    var totalWidth = this.value;
    var doorSize = calcDoorSize(totalWidth);
    doorWidthSlider.slider("option", "value", doorSize[0]);
}).focusout();

 $(document).ready(function () { var $doorwayWidth = $(".js-doorway-width"); // ширина var $doorWidthDisable = $(".js-door-width"); // ширина disable var $doorwayHeight = $(".js-doorway-height"); // высота var $doorHeightDisable = $(".js-door-height"); // высота disable var sliderOptions = [ { minWidth: 650, maxWidth: 700, minHeight: 2040, maxHeight: 2080, doorWidth: 600, doorHeight: 2000 }, { minWidth: 750, maxWidth: 800, minHeight: 2040, maxHeight: 2080, doorWidth: 700, doorHeight: 2000 }, { minWidth: 850, maxWidth: 900, minHeight: 2040, maxHeight: 2080, doorWidth: 800, doorHeight: 2000 }, { minWidth: 950, maxWidth: 1000, minHeight: 2040, maxHeight: 2080, doorWidth: 900, doorHeight: 2000 } ]; var doorwayWidthSlider = $("#doorwayWidthSlider").slider({ range: "min", min: 650, step: 50, max: 1000, value: 1000, slide: function (event, ui) { var totalWidth = ui.value; $doorwayWidth.val(ui.value); var doorSize = calcDoorSize(totalWidth); doorWidthSlider.slider("option", "value", doorSize[0]); }, change: function (event, ui) { $doorwayWidth.val(ui.value); } }); $doorwayWidth.val(doorwayWidthSlider.slider("value")); var doorWidthSlider = $("#doorWidthSlider").slider({ range: "min", disabled: true, min: 600, step: 100, max: 900, value: 900, change: function (event, ui) { $doorWidthDisable.val(ui.value); } }); $doorWidthDisable.val(doorWidthSlider.slider("value")); $doorwayWidth.val(700).focusout(function () { $("#doorwayWidthSlider").slider("value", this.value); var totalWidth = this.value; var doorSize = calcDoorSize(totalWidth); doorWidthSlider.slider("option", "value", doorSize[0]); }).focusout(); function calcDoorSize(totalWidth) { var doorWidth = null; for (var i = 0; i < sliderOptions.length; i++) { if (totalWidth >= sliderOptions[i].minWidth && totalWidth <= sliderOptions[i].maxWidth) { doorWidth = sliderOptions[i].doorWidth; break; } } return [doorWidth]; } }); 

 <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> <div> <label>Width</label> <input class="js-doorway-width" name="calculatorPvhSquare" type="text"> </div> <div> <div id="doorwayHeightSlider"></div> <img src="" alt=""> <div id="doorwayWidthSlider"></div> </div> </div> <div> <div> <label>Width</label> <input class="js-door-width" type="text" disabled> </div> <div> <div id="doorHeightSlider"></div> <img src="" alt=""> <div id="doorWidthSlider"></div> </div> </div>