jquery-ui slider customization with scale

Question

I'm trying to create range slider and have some problems.. I need create slider with scale of 5 values - 1000, 10 000, 20 000, 30 000 and 50 000. In slider we can click only on these values.

Also I need three inputs which shows input with current value of slider and can be editable, for example - 15 000 - and slider will show correct, and two disabled for editing inputs for match operations.

Here is example what I do

<div id="slider"></div>
<div>
    sum_kredit
</div>
<span>$<input id="sum_kredit" /></span>
<div>
    year
    <input id="year" disabled/>
</div>
<div>
    two_year
    <input id="two_year" disabled/>
</div>


$("#slider").slider({
    range: "min",
    value: 1000,
    step: 1000,
    min: 1000,
    max: 50000,
    slide: function (event, ui) {
        $("#sum_kredit").val(ui.value);
        $("#year").val((ui.value)/4);
        $("#two_year").val((ui.value)/5);
    }
});
$("#sum_kredit").change(function () {
    $("#slider").slider("value",this.value);
});

So, help me please with scale and correct showing slider if we type in first input non-default values..

May be it will better use another solutions for this purpose?

Answer 1

Expanding upon my comment.

$(function() {
  var myValues = [
    1000,
    10000,
    20000,
    30000,
    50000
  ];
  $("#slider").slider({
    range: "min",
    value: 0,
    step: 1,
    min: 0,
    max: myValues.length - 1,
    slide: function(event, ui) {
      var i = ui.value;
      $("#sum_kredit").val(myValues[i]);
      $("#year").val(myValues[i] / 4);
      $("#two_year").val(myValues[i] / 5);
    }
  });
  $("#sum_kredit").change(function() {
    var val = parseInt($(this).val());
    $("#slider").slider("value", myValues.indexOf(val));
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider"></div>
<div>
  sum_kredit
</div>
<span>$<input id="sum_kredit" /></span>
<div>
  year
  <input id="year" disabled/>
</div>
<div>
  two_year
  <input id="two_year" disabled/>
</div>

As you can see, you can easily reference the array to get your specific values. And you can get the index of that value using .indexOf() if you need to go the other direction.

Update

If you want a slider that can handle unknown potential values, I would advise working with it like a percentile (0 to 100). For example, if the user enters 25000; this is not in the array, yet falls between 20000 and 30000. Each coordinated breakpoint would be at 20, we'd want to land at 45 for this.

$(function() {
  var myValues = [
    1000,
    10000,
    20000,
    30000,
    50000
  ];
  $("#slider").slider({
    range: "min",
    value: 0,
    step: 1,
    min: 0,
    max: 100,
    slide: function(event, ui) {
      var i = 0;
      if (ui.value > 20) {
        i = Math.floor(ui.value / 20);
      }
      if (ui.value > 80) {
        i = 4;
      }
      $("#sum_kredit").val(myValues[i]);
      $("#year").val(myValues[i] / 4);
      $("#two_year").val(myValues[i] / 5);
    }
  });

  $("#slider .tic").each(function(ind, elem) {
    var c = $(elem).attr("class").split(" ");
    var i = c.indexOf("tic");
    c.splice(i, 1);
    var pos = c.join("");
    $(".slide-labels ." + pos).position({
      my: "center bottom",
      at: "right top-4",
      of: $(elem)
    });
  });

  $("#sum_kredit").change(function() {
    var val = parseInt($(this).val());
    var point = 0;
    if (myValues.indexOf(val) != -1) {
      point = (myValues.indexOf(val) + 1) * 20;
      console.log("Setting point from array: " + point);
    } else {
      if (val < 1000) {
        point = Math.round(val / 50);
        console.log("Setting point: " + val + " / 50 = " + point);
      }
      if (val > 1000 && val < 10000) {
        point = Math.round(val / 450) + 20;
        console.log("Setting point: " + val + " / 450 + 20 = " + point);
      }
      if (val > 10000 && val < 20000) {
        point = Math.floor(val / 500) + 20;
        console.log("Setting point: " + val + " / 500 + 20 = " + point);
      }
      if (val > 20000 && val < 30000) {
        point = Math.floor(val / 500) + 20;
        console.log("Setting point: " + val + " / 500 + 20 = " + point);
      }
      if (val > 30000 && val < 50000) {
        point = Math.floor(val / 1000) + 50;
        console.log("Setting point: " + val + " / 1000 + 50 = " + point);
      }
    }
    $("#slider").slider("value", point);
    $("#year").val(val / 4);
    $("#two_year").val(val / 5);
  });
});

#slider {
  background: transparent;
}

#slider .tic {
  border-right: 1px solid #ccc;
  width: 20%;
  height: 100%;
  display: inline-block;
  z-index: 1000;
}

.slide-labels {
  font-size: 11px;
  position: relative;
  margin-bottom: 2px;
}

.slide-labels .label {
  display: inline-block;
}

.slide-labels .label.first {
  top: -2px;
}

.slide-labels .label.last {
  float: right;
  top: -2px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="slide-labels">
  <div class="label pos-0 first">
    $0
  </div>
  <div class="label pos-1">
    $1,000
  </div>
  <div class="label pos-2">
    $10,000
  </div>
  <div class="label pos-3">
    $20,000
  </div>
  <div class="label pos-4">
    $30,000
  </div>
  <div class="label pos-5 last">
    $50,000
  </div>
</div>
<div id="slider">
  <div class="tic pos-1">
  </div>
  <div class="tic pos-2">
  </div>
  <div class="tic pos-3">
  </div>
  <div class="tic pos-4">
  </div>
</div>
<div>
  sum_kredit
</div>
<span>$<input id="sum_kredit" /></span>
<div>
  year
  <input id="year" disabled/>
</div>
<div>
  two_year
  <input id="two_year" disabled/>
</div>

It becomes a complicated calculation to adjust for different scales.