非线性ui滑块值/占位符

时间:2014-12-27 08:36:03

标签: javascript jquery html uislider jquery-ui-slider

我希望我的ui滑块位于其数组的第二个点,但是当页面加载而不是位置(1)时,文本框会显示数组值(20)。

占位符&值html元素似乎不起作用。

为方便起见,我有一个小提琴:here

HTML

<div id="slider"></div>
<input type="text" id="slider-val" value="20" />

JQuery

$(function() {
    var valMap = [10, 20, 40, 80];
    $("#slider").slider({
        range: "max",
        max: valMap.length - 1,
        value: 1,
        slide: function(event, ui) {
            if (valMap[ui.value] > 0) {
                $("#slider-val").val(valMap[ui.value]);
            } else {
                $("#slider-val").val("1/" + (valMap[ui.value - 2]) * -1);
            }
            $(valMap[ui.value]).val($('#slider-val').val());
        }
    });
    $("#slider-val").val($("#slider").slider("value"));
});

1 个答案:

答案 0 :(得分:0)

替换行:

$("#slider-val").val($("#slider").slider("value"));

使用:

$("#slider-val").val(valMap[$("#slider").slider("value")]);

由于您希望将滑块值用作valMap数组中的索引。

jsFiddle