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

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

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

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

HTML: (уведомление № 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.info(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