Как можно сделать такой range с кастомными этапами?

Question

[ArtJH]

https://codepen.io/t0m_asht0n/pen/bgXMYx

В моем примере ползунок не правильно работает. Искал решения, везде у этапах одинаковое расстояние

Comments

[Kentavr16]

А как он должен работать?

Answer 1

[ksnk]

Логарифмическая шкала?
Ну вот так, например, можно сделать. Ставим на слайдере 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))	;				})
    });