Блог

Извините, когда я хотел сделать эту функцию, я впервые изучил jQuery. Я запросил много веб-страниц и вопросов, но за последние несколько дней мне не удалось их реализовать. Очень надеюсь, что кто-нибудь сможет мне помочь!

Моя идея состоит в том, чтобы создать слайдер с двумя большими пальцами, как на видео ниже. Когда один из больших пальцев будет перемещен, другой также изменится (если один из них равен x, а другой-y, значение, введенное пользователем, равно a. Тогда соотношение между ними может быть y = 2a-x)

Я использовал следующие .css и jQuery для создания слайдера (с удалением большого количества бесполезного кода):

 lt;link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"gt;  lt;script src="https://code.jquery.com/jquery-3.6.0.js"gt;lt;/scriptgt;  lt;script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"gt;lt;/scriptgt;   lt;scriptgt;  $( function() {  $( "#myRange" ).slider({  range: false,  min: 0,  max: 200,  values: [80, 120],  slide: function( event, ui ) {  var x = ui.values[0];  var y = ui.values[1];  }  });  });  lt;/scriptgt;  

и

 lt;input type="number"/gt; lt;div id="myRange"gt;lt;/divgt;  

Учесть следующее.

 $(function() {  $("#myRange").slider({  range: false,  min: -200,  max: 200,  values: [80, -80],  slide: function(event, ui) {  var x, y, a = parseInt($("#a").val());  if ($(".ui-slider-handle.ui-state-focus").index() == 0) {  x = ui.values[0];  y = (2 * a) - x;  $(this).slider("values", 1, y);  } else {  y = ui.values[1];  x = (2 * a) - y;  $(this).slider("values", 0, x);  }  $("#x-val").html(x);  $("#a-val").html(a);  $("#y-val").html(y);   }  }); }); 

 input[type='number'] {  width: 3em; }  #myRange {  margin: 10px; }  #myRange .ui-slider-handle:nth-of-type(1) {  margin-top: -10px; }  #myRange .ui-slider-handle:nth-of-type(2) {  margin-top: 10px; }  .log span {  margin-right: 0.25em; } 

 lt;link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"gt; lt;script src="https://code.jquery.com/jquery-3.6.0.js"gt;lt;/scriptgt; lt;script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"gt;lt;/scriptgt;  lt;div class="ui-widget"gt;  lt;div class="ui-widget-content" style="margin-bottom: 20px;"gt;  lt;label for="a"gt;Enter Numberlt;/labelgt;  lt;input type="number" id="a" value="0" /gt;  lt;/divgt;  lt;div id="myRange"gt;lt;/divgt; lt;/divgt; lt;div class="log"gt;  lt;labelgt;X:lt;/labelgt;lt;span id="x-val"gt;80lt;/spangt;lt;labelgt;A:lt;/labelgt;lt;span id="a-val"gt;0lt;/spangt;lt;labelgt;Y:lt;/labelgt;lt;span id="y-val"gt;120lt;/spangt; lt;/divgt; 

Хитрость в этом заключается в том, что пользователь может схватить любую ручку. Знание того, на каком дескрипторе находится фокус, позволяет нам присвоить правильное значение.

Обновить

Вы тоже можете немного подтянуть его:

 $(function() {  $("#myRange").slider({  range: false,  min: -200,  max: 200,  values: [80, -80],  slide: function(event, ui) {  var a = parseInt($("#a").val());  if ($(".ui-slider-handle.ui-state-focus").index() == 0) {  $(this).slider("values", 1, (2 * a) - ui.values[0]);  } else {  $(this).slider("values", 0, (2 * a) - ui.values[1]);  }  }  }); });