Как умножить значение, получаемое в «range»?

Question

[dimanche]

На сайте есть ползунок для выставления значения.
Ссылка на пример
Как выцепить значение получаемого ползунка, чтобы можно было это значение в дальнейшим умножить и вывести полученный результат в span?

Comments

[Elvis]

делайте листнер на изменение этого элемента

document.querySelector("body > div.banner-orange > div > div > div:nth-child(2) > div.range > span > span.irs > span.irs-single")

и умножайте на вашу постоянную для вывода в нужный span

Answer 1

[Дмитрий]

Это зависит от того, каким образом реализован "ползунок" на сайте. Если это jQuery UI, то через событие change нужно получить значение слайдера, умножить его на нужное значение и вывести в нужном элементе.
Примерно так:

$( ".selector" ).on( "slidechange", function( event, ui ) {
    var result = parseInt(ui.value) * 10; // Получили значение, умножили
    $('.result').text(result); // Записали значение
});

С другими плагинами или реализациями смысл примерно тот же самый.

Comments

[dimanche]

"ползунок" реализован на Ion.RangeSlider.
он добавляется

<div class="range">
<input type="text" class="js-range-slider" id="demo_0" name="my_range" value="" />
</div>

и скрипт

$("#demo_0").ionRangeSlider({
	   min: 1,
	   max: 30,
	   from: 10,
	   postfix: " м²"
   });

при #demo_0 не вывод в результат.

[Дмитрий]

В документации к плагину есть раздел об этом:
ionden.com/a/plugins/ion.rangeslider/start.html#a_...
Вот пример кода:

$("#demo_0").ionRangeSlider({
        ...

        onChange: function (data) {
            // Выполняется, когда ползунок передвинут
            var result = parseInt(data.to) * 10;
            $('.result').text(result);
        }
    });

[dimanche]

Дмитрий, Спасибо огромное. Видит, как будто ползунок выставлен на максимальном значении (30). При передвижении не пересчитывает результат

[Дмитрий]

dimanche, так вы пытаетесь получить значение из объекта data при событии onChange?