Question

我正在尝试使用存储在数组中的值使用jQueryUI滑块填充自定义值。每当我尝试更改最小值和最大值以及步骤方法时，它都不会按预期显示结果。对正确方法的任何帮助都会受到赞赏吗？

  $(function() {
    var steps = [{"10": "$15"}, {"25": "$20"}, {"50": "$35"}, {"100": "$60"}, {"250": "$125"}, {"500": "$200"}, {"1000": "$300"}];

   $( "#slider" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 100,
      slide: function( event, ui ) {
          $( "#amount" ).val( ui.value );
      }
   });
});

Answer 1

根据我认为您尝试做的事情，可以进行以下更改：

<强> HTML

<p>
  <label for="amount">Donation amount ($50 increments):</label>
  <input type="text" readonly id="amount" value="$100" />
</p>

<div id="slider"></div>

<强> JQuery的

$(function() {
  var steps = {
    10: "$15",
    25: "$20",
    50: "$35",
    100: "$60",
    250: "$125",
    500: "$200",
    1000: "$300"
  };
  $("#slider").slider({
    min: 0,
    max: 500,
    range: 'min',
    step: 10,
    animate: 0,
    value: 100,
    slide: function(e, ui) {
      $("#amount").val(steps[ui.value]);
    }
  });
});

但我认为您可能真的想要这样做：https://jsfiddle.net/Twisty/uL3j7q05/6/

<强> JQuery的

$(function() {
  $("#slider").slider({
    min: 0,
    max: 1000,
    range: 'min',
    step: 50,
    animate: 0,
    value: 100,
    slide: function(e, ui) {
      $("#amount").val("$" + ui.value);
    }
  });
});

将自定义标签和值添加到jQueryUI Slider

1 个答案: