Умножение значения слайдера на число jQuery

233

06 февраля 2018, 08:00

Отдам все свои драгоценные благодарности в руки тому, кто сможет помочь молодому дизайнеру понять jQuery.

Есть слайдер (на Ангуларе), в диапозоне от 1 до 5 (кв.м) он выдает значения с шагом в 0.1.
С целью получения клиентом цены за количество квадратных метров на сайте, очень сильно хочу умножать цену 12 000 ₽ за кв.м.
Мой итог – ручка слайдера двигается, но прописанные 12 000 ₽ не меняются.

Сам скрипт:

$(document).ready(function () {
    function update() {
        var bill_slider = $('.ng-binding');
        var yearly_bill = (bill_slider * 12000);
        $("#duration").text(yearly_bill);
    }
});

Вовлеченные персонажи:

<div class="bubble value low" id="amount" style="left: -12px;">
<b class="ng-binding">1</b> м²
</div>
<span style="font:800 233.3% 'Proxima';" id="duration">12 000</span> ₽

Answer 1

$(document).ready(function () { 
   $(".slider").on("input", function(){  
        $('b.ng-binding').text($(this).val()) 
        var bill_slider =   $('b.ng-binding').text(); 
        var yearly_bill = (parseInt(bill_slider) * 12000); 
        $("#duration").text(yearly_bill); 
    }); 
});

.slidecontainer { 
    width: 100%; 
} 
 
.slider { 
    -webkit-appearance: none;     
    width: 70%; 
    height: 25px; 
    background: #d3d3d3; 
    outline: none; 
    opacity: 0.7; 
    -webkit-transition: .2s; 
    transition: opacity .2s; 
} 
 
.slider:hover { 
    opacity: 1; 
} 
 
.slider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 25px; 
    height: 25px; 
    background: #4CAF50; 
    cursor: pointer; 
} 
 
.slider::-moz-range-thumb { 
    width: 25px; 
    height: 25px; 
    background: #4CAF50; 
    cursor: pointer; 
}

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 
 
<div class="slidecontainer">  
  <p>Сколько м² в квартире вы хотите?</p> 
  <span>1 м²</span><input type="range" min="1" max="100" value="1" class="slider" id="myRange"><span>100 м²</span> 
</div> 
 
<div class="bubble value low" id="amount" style="left: -12px;"> 
<br/> 
Желаемая площадь квартиры: <b class="ng-binding">1</b> м² 
</div> 
 
<p>Стоимость квартиры:<br/><span style="font:800 233.3% 'Proxima';" id="duration">12 000</span> ₽</p> 
 
 
</body> 
</html>

Answer 2

В общем, для конкретно своего случая со слайдером, состоящим из div блоков, выработал вариант на основе предложенного.

Суть здесь в том, что функцию активирует событие mousemove (touchmove для тачскринов) на участке слайдера. А лучше даже кинуть его на весь div/section–блок, в котором лежит слайдер, чтобы вычисление не затупило, когда ваш курсор доходит до крайнего значения слайдера и выходит за его предел. В моем случае это блок с классом counter.

jQuery:

    $(document).ready(function () {
    $(".counter").on('mousemove touchmove', function(){
        var bill_slider =   $('b.ng-binding').text();
        var yearly_bill = (parseFloat(bill_slider) * 12000);
        $("#duration").text(parseInt(first_type));
    });
});

HTML:

<section class="counter">
  <div class="bubble value low" id="amount" style="left: -12px;">
      <b class="ng-binding">1</b> м²
  </div>
  <span style="font:800 233.3% 'Proxima';" id="duration">12 000</span> ₽
</section>