[ФедорН]

laimas, добрый день. посмею обратиться еще раз

При тестировании калькулятора обнаружились проблемы в ie 10, 11 и некоторых мобильных браузерах,а именно:

1. При изменении значение ползунка, не меняется значение output, value всегда остается начальным. В связи с этим, а также неудобством использования ползунка (точный поиск значения с шагом 1) на мобильных устройствах, хотелось бы реализовать рядом с ползунком iput text или number, который будет дублировать значение ползунка,а при вводе числа в input будет меняться значение ползунка, учитывая ограничения, и их автоматическая корректировка, max и min. Пересмотрел примеры, но везде это реализовано через ui, к которому прибегать не хотелось бы (оставив input range). Попытки "колхоза" результата не дали вообще никакого

2. При вводе значений, результат в поле input readonly не выводится.
Он может вывестись/измениться, только в том случае если вы установите курсор в это поле, нажмете клавишу на клавиатуре. В противном случае поле всегда статично. не подскажете, в чем причина?

3. не совсем вопрос по теме, но в некоторых случаях также не отображается "направляющая" ползунка, а только передвигающая часть (бегунок).
стилизовал с учетом кроссбраузерности, но так и не могу понять, в чем причина. возможно, скажете, где копать?

Чтобы не искать код, дублирую:

$(function() {
      $('button.addMore').click(function() {
        $('div.roword').first()
            .clone()
            .appendTo($('#form'))
            .find('select').val('')
            .end()
            .find('divinput')
            .val(function(i) {
                return i == 4 ? ''
                    : this.type == 'range' ? this.min
                    : $(this).prev().attr('min')
            })
            .end()
            .find('a').click(function() {
                $(this).closest('.roword').remove()
            })
            .show()
    })

    $('#form').on('input', 'select, input', function() {
        if(this.type == 'range') $(this).next().val(this.value)
        var o = $(this).closest('.roword').find('select,input'), //получить все элементы
            v = o.eq(0).val(), //значение списка
            w = o.eq(1).val(), //ширина
            h = o.eq(2).val(), //высота
            r = o.last().val(''); //вывод результата, очистить
        if(v) { //если в списке выбрано значение
            v = v * w * h;
            if(w * h <= 2399)  v *= 1.1
            else if(w * h >= 2400 && w * h <= 3999) v *= 1.055
            else if(w * h >= 4000 && w * h <= 5399) v *= 1.03;
            else if(w * h >= 5400 && w * h <= 6399) v *= 1.0135;
            r.val(v.toFixed(0))
        }
    })

});

var orderInfo = $.map($('.roword'), function(e) { //вставляет значения из калькулятора в форму заказа

	var o = $(e).find('select,input'); //получить все элементы



	if(o.eq(3).val()) return o.eq(0).children(':selected').text() + ' ' + o.eq(1).val() + 'x' + o.eq(2).val() + ' ' + o.eq(3).val() //если был выбор

});

if(orderInfo.length) $('textarea#orderItems').val(orderInfo.join('\n'))

<div id="form" >
       <div class="roword">
           <div class="col-md-3 col-sm-6 col-xs-12 form-col-1">
               <select  form="send" name="type[]">
                    <option value="">Выберите цвет</option>
                   <option value="1.1">Зеленый</option>
                   <option value="1.4">Синий</option>
                   <option value="1.75">Красный</option>
               </select>
           </div>
           <div class="col-md-3 col-sm-6 col-xs-12 form-col-2">
               <input  form="send" type="range" min="40" max="200" name="height[]" value="40">
              
           </div>
           <div class="col-md-3 col-sm-6 col-xs-12 form-col-3">
               <input form="send" type="range" min="40" max="300" name="width[]" value="40"> <output>40</output>
           </div>
           <div class="col-md-2 col-sm-5 col-xs-10 form-col-4">
               <input class="myPrice" form="send" type="text" name="result[]">
           </div>
           <div class="col-md-1 col-sm-1 col-xs-2 form-col-5">
                <a style="display:none" class="close"></a>
           </div>

       <div class="clearfix"></div>
       </div>
   </div>
   <div class="clearfix addbutton"></div>
   <button class="addMore">Добавить еще</button>