One sided jQuery UI slider

Question

I am using jQuery UI range slider to allow the user to define a range. Based on the user's selection I will then show/hide different divs.

In order to achieve that I use data-price="" that allow me to check if the value is bigger or smaller than that.

What I would like to achieve is:

• Have only one selection for the price rather than selection from left and right.
• I would like to keep the functionality where the bar is filling with colour based on selection. (in the example in grey)

I have tried changing range: true to range: false but I could not achieve the desired effect.

My JSFIDDLE example is here: https://jsfiddle.net/L47mo8bm/

I have tried the following but not sure why the logic is not working: https://jsfiddle.net/57axLd53/1/

Answer 1

I changed around some options in your .slider function. I set range to false and use a single value to init the slider. You will have to change your logic of showing the products because it won't work with a single slider. As for the color I'm not sure what you mean by that so you would have to clarify that a bit.

$(function () {
  $('#slider-container').slider({
      range: false,
      min: 299,
      max: 1099,
      value: 500,
      create: function() {
          $("#amount").val("$299 - $1099");
      },
      slide: function (event, ui) {
          $("#amount").val("$" + ui.value);
          var slider_value = ui.value;
          //filterSystem(slider_value);
      }
  })
});

function filterSystem(sliderValue) {
  $("#computers div.system").hide().filter(function () {
      // put logic here to show product within X price of selection
  }).show();
}

Answer 2

I have solved the following using this code: https://jsfiddle.net/57axLd53/4/

$(function() {
  $("#slider-container").slider({
    range: 'min',
    min: 4,
    max: 10,
    value: 8,
    step: 2,
    slide: function(event, ui) {
      var curValue = ui.value;
      var tooltip_Date = '<div class="tooltip_Date"><div class="tooltip_Date-inner">' + curValue + ' years</div><div class="tooltip_Date-arrow"></div></div>';
      $(this).find('.ui-slider-handle').html(tooltip_Date);
      $("#number_repayments").html(curValue);

      if (ui.value < 5) {
        $('.system1').css('display', 'block');
        $('.system2, .system3, .system4').css('display', 'none');
      } else if (ui.value < 7) {
        $('.system2').css('display', 'block');
        $('.system3, .system1, .system4').css('display', 'none');
      } else if (ui.value < 9) {
        $('.system3').css('display', 'block');
        $('.system2, .system1, .system4').css('display', 'none');
      } else if (ui.value > 9) {
        $('.system4').css('display', 'block');
        $('.system2, .system1, .system3').css('display', 'none');
      }

    },
    create: function(event, ui) {
      var curValue = ui.value || 8;
      var tooltip_Date = '<div class="tooltip_Date"><div class="tooltip_Date-inner">' + curValue + ' years</div><div class="tooltip_Date-arrow"></div></div>';
      $(this).find('.ui-slider-handle').html(tooltip_Date);
      $("#number_repayments").html(curValue);
    }
  });
});

f