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