JQuery UI нелинейный слайдер

Question

Мне нужен ползунок, чтобы пользователь мог выбрать вес.

$("#slider").slider({ 
    value: 15, 
    slide: function(event, ui) { 
     $('#weight').text(ui.value); 
    } 
}); 

Но значения должны быть нелинейными: Это означает «нормальное» поведение для значений от 10 до 50 (увеличения с шага 1).

Затем, например: если значения становятся больше, они должны увеличиваться с шагом 10. Если пользователь выбирает более низкие значения, он должен быть более точным: значения от 3 до 10 (с шагом в 0,5), ниже 3 -> увеличение шаги 0.1.

Моя попытка будет использовать собственный массив для данных:

myData = [ 0.4, 0.45, 0.5, 0.55, 0.65, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 6, 7, 8, 9, 10,11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 40, 50, 60, 70 ]; 
$("#slider").slider({ 
    min: 0, 
    max: myData.length - 1, 
    step: 1, 
    slide: function(event, ui) { 
     $('#weight').text(ui.value); 
    }, 
    create: function() { 
       $(this).slider('values',0,0); 
       $(this).slider('values',1,myData.length - 1); 
    } 
}); 

Но это не работает. Есть ли более разумное решение?

Answer 1

myData = [ 0.4, 0.45, 0.5, 0.55, 0.65, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 6, 7, 8, 9, 10,11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 40, 50, 60, 70 ]; 
$("#slider").slider({ 
    min: 0, 
    max: myData.length - 1, 
    step: 1, 
    slide: function(event, ui) { 
     $('#weight).text(myData[ui.value]); 
    } 
});