非线性 ui 滑块值/占位符

Posted 2023-03-13

【中文标题】非线性 ui 滑块值/占位符

【英文标题】：non-linear ui slider value/placeholder

【发布时间】：2014-12-27 08:36:03

【问题描述】：

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

占位符和值 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】：

换行：

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

与：

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

因为您想使用滑块值作为valMap 数组中的索引。

jsFiddle