JQuery UI Slider: прогрессивная шкала делений и сетка

Question

Мне нужно сделать слайдер, как на картинке ниже:

Было бы неплохо использовать стандартный Jquery UI Slider, но он по умолчанию не поддерживает деление шкалы, и сложно сделать нерегулярное масштабирование (не 1 | 2 | 3 | 4 | 5, а 1 | 2 | 5 | 10 | 20)

.

Существует альтернативный плагин слайдера (http://blog.egorkhmelev.com/2009/11/jquery-slider-safari-style/),, но он не поддерживает возможность изменять положение слайдера, нажимая на шкалу.

Есть ли несколько простых решений для моей задачи?

Answer 1

Хранение нужных значений в массиве и «выбор» одного из значений ползунка кажется мне самым простым решением, так как вы в любом случае должны сами предоставить метки:

var steps = [0, 20, 30, 50, 75, 100, 150, 200, 300];

$("#slider").slider({
    range: "min",
    value: 0,
    min: 0,
    max: steps.length,
    step: 1,
    slide: function(event, ui) {
        $("#amount").text(steps[ui.value]);
    }
});

Попробуйте:http://jsfiddle.net/mwh2u/