jquery - 向 jQueryUI Slider 添加自定义标签和值

Question

我正在尝试使用 jQueryUI slider 从存储在数组中的值填充自定义值。每当我尝试更改最小值和最大值以及步骤方法时，它都不会按预期显示结果。任何有关正确方法的帮助将不胜感激？

PLUNKER

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