Логарифмическая шкала?
Ну вот так, например, можно сделать. Ставим на слайдере 1000 элементов. Пишем функцию конверсии значения слайдера в значение инпута и наоборот, рисуем метки под слайдером учитывая конверсию.
чем больше step тем "кривее" шкала.
$(function() {
var valMap = [0, 1, 3, 6, 10, 15, 22, 30,40, 50]; // более равномерно в логарифмической шкале
// 0..1000 --> 0..50 (true, обратно false)
const step=2,
w=[1000/Math.pow(50,1/step),50/Math.pow(1000,step)] ;
function _conv(x, forvard){
if(!forvard)
return Math.pow(x,1/step)*w[0];
else
return Math.round(Math.pow(x,step)*w[1]);
}
$("#slider").slider({
max: 1000,//valMap.length - 1,
slide: function(event, ui) {
$("#radiusAmount").val(_conv(ui.value,true));
}
})
.each(function() {
var opt = $(this).data().uiSlider.options;
var vals = opt.max - opt.min;
var arrayLength = valMap.length;
for (var i = 0; i < arrayLength; i++) {
var el = $('<label>' + (valMap[i]) + '</label>').css('left', (_conv(valMap[i],false) / 10 ) + '%');
$("#slider").append(el);
}
});
$(document).on('change','#radiusAmount', function(){
$("#slider").slider('value',_conv($(this).val(), false)) ; })
});