1

Не работает нижняя часть кода, то есть при изменении input с клавиатуры значение не меняется. Я прокомментировал, так как примерно понимаю, прошу помочь или указать, что именно не так делаю.

Похожий пример http://www.xiper.net/collect/js-plugins/ui/jquery-ui-slider

$(function() {
  $("#value_realestate_slr").slider( {
    range: "max", min: 1800000, max: 30000000, value: 26300000, slide: function(event, ui) {
      $("#value_realestate_lbl").val(ui.value);
    }
  }
  );
  $("#value_realestate_lbl").val($("#value_realestate_slr").slider("value"));
}

);
$('#value_realestate_lbl').change(function() {
  var changeValue=$('#value_realestate_lbl').val();
  $("#value_realestate_slr").val(changeValue.slider("value"));
}

);
<div class="mbl_field">
  <input type="text" id="value_realestate_lbl" class="intg">
</div>
<div id="value_realestate_slr" class="sld"></div>


<script src="http://www.xiper.net/examples/js-plugins/ui/ui-slider/js/jquery.ui-slider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2
  • Как насчет html кода?
    – NeedH8
    18 авг 2017 в 8:59
  • Добавил, но не знаю как ui slider библиотеку подключить, чтоб рабочий пример был :( 18 авг 2017 в 9:04

1 ответ 1

3

Примерно так:

jQuery(document).ready(function($) {
  var input = $('#value_realestate_lbl');
  var slider = $('#value_realestate_slr').slider({
    range: 'max',
    min: 1800000,
    max: 30000000,
    value: 26300000,
    slide: function(event, ui) {
      input.val(ui.value);
    }
  });

  input.val(slider.slider('value'));

  input.on('change', function() {
    slider.slider('value', $(this).val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="mbl_field">
  <input type="text" id="value_realestate_lbl" class="intg">
</div>
<div id="value_realestate_slr" class="sld"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.