向 jQueryUI Slider 添加自定义标签和值答案

【问题标题】：Adding custom label and value to jQueryUI Slider向 jQueryUI Slider 添加自定义标签和值
【发布时间】：2016-02-28 08:16:53
【问题描述】：

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

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

【问题讨论】：

steps 是从哪里来的？我看不到它在任何地方使用。
这是我问的问题？ jQueryUI滑块如何使用steps数组？
不幸的是你不能。您最好的选择是使用change 事件并更新step 值。
这样就可以在slide或stop期间获取句柄值。然后你可以在你的数组中使用它......但是......这是一种非常奇怪的数据处理方式。当value为10时，是要获取数组的第10个索引还是要获取以“10”为索引的对象？
从数组中，键将是标签，值将是该值，幻灯片将仅针对这些值

标签： jquery jquery-ui

【解决方案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);
    }
  });
});

【讨论】：