Обратные обработчики ползунков диапазона JQuery

Question

Я работаю над Ползунком Диапазона, где я хотел изменить диапазоны в ползунке при нажатии кнопки.Я почти сделал основные, но меня смущает расчет работы маркеров ползунка после замены значений в текстовом поле.

Я разместил код в скрипке.

* JQuery Click Handler для изменения значений *

$("#reversePassFailVal").click(function(e){
    e.preventDefault();
    sliderElement.slider({
    slide: function(event, ui) {
      $("#minValue").val(9-ui.values[0]);
      $("#maxValue").val(5-ui.values[1]);
    }

  })
    $("#minValue").val(sliderElement.slider('values', 1));
  $("#maxValue").val(sliderElement.slider('values', 0));
});

HTML

<form id="form1">
    Caution Range: 
    <span id="cautionVal"/>
    <br/>
    <div id="slider"/>
    <br/>
    <label for="txtPassRange">Pass Range</label>
    <input type="text" id="minValue"/>
    <br/>
    <label for="txtFailRange">Fail Range</label>
    <input type="text" id="maxValue" />
    <br/>
    <a href="#" class="btn btn-default" id="reversePassFailVal">Inverse</a>
</form>

Вы можете найти код в этом FIDDLE

Answer 1

Вам нужно будет уничтожать ползунок при каждом изменении диапазона.

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

Код нуждается в оптимизации, и я открыт для него. Пожалуйста, предложите их в комментариях ниже.

HTML: (Notice # Slider1)

<form id="form1">
  Caution Range: <span id="cautionVal"></span>
  <br /><br />
  <div id="slider"><br /></div>
  <div id="slider1"></div><br />
  <label for="txtPassRange">Pass Range</label>
  <input type="text" id="minValue" />
  <br /><br />
  <label for="txtFailRange">Fail Range</label>
  <input type="text" id="maxValue" />
  <br /><br />
  <a href="#" class="btn btn-default" id="reversePassFailVal">Inverse</a>
</form>

JS:

$(document).ready(function() {
  var cautionValue = $("#cautionVal");
  var flag = 0;
  var sliderElement = $("#slider");
  var sliderElement1 = $("#slider1");
  $("#slider").slider({
    range: true,
    steps: 0.01,
    values: [5, 9],
    min: 0,
    max: 24,
    slide: function(event, ui) {
      cautionValue.html(ui.values[0] + '-' + ui.values[1] + 'km/lo');
      $("#minValue").val(ui.values[0]);
      $("#maxValue").val(ui.values[1]);
    },

  });
  cautionValue.html(sliderElement.slider('values', 0) + '-' + sliderElement.slider('values', 1) + 'km/lo');
  $("#minValue").val(sliderElement.slider('values', 0));
  $("#maxValue").val(sliderElement.slider('values', 1));

  // Inverse Click Handler
  $("#reversePassFailVal").click(function(e) {
    e.preventDefault();
    if ($('#slider').length) {
      sliderElement.slider("destroy");
      sliderElement.remove();
    } else {
      sliderElement1.slider("destroy");
    }
    var maxVal = $("#maxValue").val();
    var minVal = $("#minValue").val();
    var minRange = 0;
    var maxRange = 24;
    if (flag === 0) {
      maxVal = maxVal * -1;
      minVal = minVal * -1;
      minRange = -24;
      maxRange = 0;
    }
    sliderElement1.slider({
      range: true,
      steps: 0.01,
      values: [maxVal, minVal],
      min: minRange,
      max: maxRange,
      slide: function(event, ui) {
        if (flag === 0) {
          cautionValue.html(Math.abs(ui.values[0]) + '-' + Math.abs(ui.values[1]) + 'km/lo');
          $("#minValue").val(Math.abs(ui.values[1]));
          $("#maxValue").val(Math.abs(ui.values[0]));
        } else {
          cautionValue.html(Math.abs(ui.values[1]) + '-' + Math.abs(ui.values[0]) + 'km/lo');
          $("#minValue").val(Math.abs(ui.values[0]));
          $("#maxValue").val(Math.abs(ui.values[1]));
        }
        console.log(Math.abs(ui.values[0]) + '-' + Math.abs(ui.values[1]) + 'km/lo');
      },

    });
    var val0 = Math.abs(sliderElement1.slider('values', 0));
    var val1 = Math.abs(sliderElement1.slider('values', 1));
    cautionValue.html(val0 + '-' + val1 + 'km/lo');
    $("#minValue").val(val0);
    $("#maxValue").val(val1);
    if (flag === 0) {
      flag = 1;
    } else {
      flag = 0;
    }

  });
});

Смотрите это в действии здесь: JsFiddle