Как связать шаги ввода на слайдере JQuery со входом? - PullRequest
Новая
       7

Как связать шаги ввода на слайдере JQuery со входом?

0 голосов
/ 22 июня 2019

У меня проблема с моим динамическим ползунком, который связан с полем ввода значения. В настоящее время у меня есть ползунок, подключенный к полю ввода со значениями от 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));
}
});

})
...