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

我想从存储在数组中的值使用jQueryUI滑块填充自定义值。每当我尝试更改最小值和最大值以及步骤方法时，它都不会按预期显示结果。任何帮助正确的方法将不胜感激？将自定义标签和值添加到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); 
     } 
    }); 
});

来源

2016-02-28 Nitesh

哪里'steps'来到这个？我看不到它在任何地方被使用。 – Yass

这是我问过的问题吗？如何利用jQueryUI滑块步骤数组？ – Nitesh

你不能不幸。你最好的选择是使用'change'事件并更新'step'的值。 – Yass

根据我认为你正在试图做的，可以做如下修改：

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

来源

2016-03-01 00:00:04 Twisty

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

回答

相关问题