Question

与输入值框连接的动态滑块出现问题。我目前拥有的是一个连接到输入框的滑块，其值从100-60000。从100-3000，它以100为步长，以3000-6000以500为步长，以6000-60000以1000为步长。

使用我当前的代码，实际上很难用滑块选择较小的值，因为值与最大值相比太小了，所以我的目标是使滑块每步均匀移动，例如：

“ 100-200-1000-2000-5000-10000-60000”

不喜欢我目前拥有它：

“ 100-200 ------------ 1000 --------------- 2000 -------------- ---------- 5000 ...”

我已经尝试过使用自定义值数组

（customVal = [100，200，300，400，500，600，700，800，900，1000，1100，1200，1300，1400，1500，1600，1700，1800，1900，2000，2100，2200 ，2300、2400、2500、2600、2700、2800、2900、3000、3500、4000、4500、5000、5500、6000、7000、8000、9000、10000、11000、12000、13000、14000、15000、16000、17000 ，18000、19000、20000、21000、22000、23000、24000、25000、26000、27000、28000、29000、30000、31000、32000、33000、34000、35000、36000、37000、38000、39000、40000、41000、42000 ，43000，44000，45000，46000，47000，48000，49000，50000，51000，52000，53000，54000，55000，56000，57000，58000，59000，60000];）

但是，问题是，如果我使用自定义数组，因为它只有90步，如果我想通过输入字段移动滑块，就会搞砸了，因为如果我键入90，滑块会移动到最右边的位置而不是应该的60000。

这是我目前情况的小提琴：https://jsfiddle.net/3gyasc81/

$(document).ready(function() {

$("#slider").slider({
    range: "min",
    value: 100,
    step: 100,
    min: 0,
    max: 60000,
    slide: function( event, ui ) {
       // var step = $('#slider').slider('option', 'step');
            if(ui.value<3000)
            {$('#slider').slider('option', 'step', 100);}
            if(ui.value>3000)
            {$('#slider').slider('option', 'step', 500);}
            if(ui.value>6000)
            {$('#slider').slider('option', 'step', 1000);}
        $( "#amount" ).val(ui.value);
    }
});

$("#amount").change(function () {
    $("#slider").slider("value", parseInt(this.value));
});

$("#amount").keyup(function () {
    $("#slider").slider("value", parseInt(this.value));
});

$("#amount").on('blur', function() {
    if (!this.value) {
        $("#amount").val(100);
        $("#slider").slider("value", parseInt(this.value))
    }
});

$('#amount').on('input', function () {    
var value = $(this).val();    
        if ((value !== '') && (value.indexOf('.') === -1)) {        
        $(this).val(Math.max(Math.min(value, 60000), 1));
}
});

})

如何使JQuery滑块上的步连入输入？

0 个答案: