Ссылка на jbin
Фигово сохранилось предыдущее..

я не умею :) пользоватся github и jsbin
ниже строки 12 и 18

$("#slider2").slider({  orientation: "vertical",
        value: 0,
        min: 0,
        max: steps2.length - 1,
        step: 1,
        range: "max",
        animate: "slow",
        slide: function(event, ui) {
            var Y = steps2[ui.value];
            $("#amount2").val(Y);
            $("#amount3").val(price[num][Y]);
            $("#olol").css({width : num * 3, height : Y*3})
        },
        change: function(event, ui) {
            var Y = steps2[ui.value];
            $("#amount2").val(Y);
            $("#amount3").val(price[num][Y]);
            $("#olol").css({width : num * 3, height : Y*3})

        }
    });

Балин) Слов нет - одни эмоции. Я там столько строк по мануалам с разных сайтов понавтыкал... а тут одной строчкой все! я не одолею эту науку видимо :) Спасибо!!!

По сути осталась последняя стадия (ну или предпоследняя)

код расчета стоимости при смене ползунка доделал с переменной 'obra'

var price = {
    30: {
        30: 905 + obra,
        40: 1095 + obra
    },
    40: {
        30: 1095 + obra,
        40: 1305 + obra,
        60: 1730 + obra
    },

и т.д.,
и добавил в хтмл селектор:

<select id="obra">
<option value="1250">Портрет "под масло"</option>
<option value="1250">В стиле GTA</option>
<option value="500">В стиле "Грандж"</option>
<option value="950">Поп-арт портрет</option>
</select>

Как сделать правильно функцию, чтобы при смене селектора в #amount3 выводило ценник с учетом ценника обработки? :)

нагуглил очередную длиннофункцию

obra = document.getElementById('obra').options[document.getElementById('obra').selectedIndex].value;;

и чую это бред получица..

fos,
obra из price убрать, заменить инициализацию slider2 и добавить change для селекта.

$("#slider2").slider({  orientation: "vertical",
        value: 0,
        min: 0,
        max: steps2.length - 1,
        step: 1,
        range: "max",
        animate: "slow",
        slide: function(event, ui) {
            var Y = steps2[ui.value];
            $("#amount2").val(Y);
            var obra = +$("#obra").val();
            $("#amount3").val(price[num][Y]+obra);
            $("#olol").css({width : num * 3, height : Y*3})
        },
        change: function(event, ui) {
            var Y = steps2[ui.value];
            $("#amount2").val(Y);
            var obra = +$("#obra").val();
            $("#amount3").val(price[num][Y]+obra);
            $("#olol").css({width : num * 3, height : Y*3})

        }
    });
    $("#obra").on("change", function() {
    $("#slider2").slider("option", "value", 0);
})

и у вас без reverse неправильно формируются чёрточки для вертикального ползунка пост 27 строка 141

reverse я вернул, я сначала убирал эту строку - jsbin на это отрицание ругалось как на еррор, я убрал, чтобы ошибок в коде не было - запустил без строки и не понял сначала в чем косяк, а потом реверс шкалы2 узрел :)

По поводу obra - гигантское спасибо :) и если лс открыто - прошу ответить на сообщение, которое сейчас отправлю :)

Вернемся к нашим баранам :)

имеется тотже селектор:

<select id="obra">
<option value="1250">Портрет "под масло"</option>
<option value="1250">В стиле GTA</option>
<option value="500">В стиле "Грандж"</option>
<option value="950">Поп-арт портрет</option>
</select>

И появился буттоны с id=obrpm, id=obrgta, id=obrgrng, id=obrpopart

Как сделать так, чтобы по клику на буттн id=obrpm - в селекторе выбирался пункт

<option value="1250">Портрет "под масло"</option>

при клике на id=obrgta выбирался пункт

<option value="1250">В стиле GTA</option>

и т.д.? :)

fos,
заменить

$("#obra").on("change", function() {
    $("#slider2").slider("option", "value", 0);
    $(".but")[this.selectedIndex].checked = true
})

добавить

$(".but").on("click", function() {
    var i = $(".but").index(this);
    $("#obra")[0].selectedIndex = i;
    $("#obra").trigger("change")
})

<label>Портрет "под масло"<input name="obr" type="radio"  class="but" checked="checked"></label>
<label>В стиле GTA<input name="obr" type="radio"  class="but"></label>
<label>В стиле "Грандж"<input name="obr" type="radio"  class="but"></label>
<label>Поп-арт портрет<input name="obr" type="radio"  class="but"></label>

по желанию

label{
  display: block;
}

Круто :) как всегда все коротко и ясно! Респект!

Привет, Рони! Не могу понять, почему значение 2 ползунка сбрасываются на ноль при каждом движении 1 ползунка?