Question

我正在尝试创建范围滑块并遇到一些问题。我需要创建5个数值级的滑块 - 1000,10000,20000,30000和50000。在滑块中，我们只能点击这些值。

另外我需要三个输入显示带滑块当前值的输入并且可以编辑，例如 - 15 000 - 并且滑块将显示正确，两个禁用以进行编辑匹配操作的输入。

这是我做的例子

<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);
});

所以，如果我们输入第一个输入非默认值，请使用比例和正确显示滑块帮助我..

可能会为此目的更好地使用其他解决方案吗？

Answer 1

扩展我的评论。

＆＃13;

$(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));
  });
});

＆＃13;

<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>

＆＃13;

如您所见，您可以轻松引用数组以获取特定值。如果您需要转向其他方向，则可以使用.indexOf()获取该值的索引。

<强>更新

如果你想要一个可以处理未知潜在价值的滑块，我会建议像百分位数（0到100）一样使用它。例如，如果用户输入25000;这不在数组中，但是在20000和30000之间。每个协调断点将在20，我们想要为此降低45。

＆＃13;

$(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);
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

调整不同比例是一个复杂的计算。

jquery-ui使用缩放

1 个答案: