OnChange для диапазона HTML5

Ответ 1

Используйте для окончательного выбранного значения:

 $(".slider").on("change", function(){console.log(this.value)});

Используйте, чтобы получить инкрементное значение как скользящее:

$(".slider").on("input", function(){console.log(this.value)});

Ответ 2

Бит поздно, но на днях у меня была та же проблема. Вот мое решение с помощью jQuery bind/trigger:

(function(el, timeout) {
    var timer, trig=function() { el.trigger("changed"); };
    el.bind("change", function() {
        if(timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(trig, timeout);
    });
})($(".slider"), 500);

Теперь просто привяжите свою функцию к "измененному" событию.

Ответ 3

Ба!

Используйте onmouseup событие Вместо onChange

Ответ 4

Одна из проблем заключается в том, что AFAIK HTML5 не определяет, когда предполагается событие onchange, поэтому он, скорее всего, отличается от браузера браузером. И вы также должны учитывать, что браузер фактически не должен отображать input type=range как слайдер.

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

Быстрый пример для последнего (просто быстрый взлом, непроверенный).

var doSearch = false;

function runSearch() {
   // execute your search here 
}

setInterval(function() {
  if (doSearch) {
     doSearch = false;
     runSearch();
  }
}, 2000); // 2000ms between each search.

yourRangeInputElement.onchange = function() { doSearch = true; }

Ответ 5

Pure JS здесь:

myInput.oninput = function(){
    console.log(this.value);
}

или

myInput.onchange = function(){
    console.log(this.value);
}

Ответ 6

Здесь я использую для захвата "события изменения" для слайдера диапазона html5:

HTML:

<form oninput="output1.value=slider1.value">
    <input type="range" name="slider1" value="50"/>
    <output name="output1" for="slider1">50</output>
</form>

JavaScript:

var $slider = $('input[name="slider1"]');

$slider.bind('change', function(e) {
    e.preventDefault();
    console.log($(this).val());
});

Вы также можете привязать событие 'click' к ползунку диапазона, если вы хотите вернуть его значение, когда оно было нажато (или даже перетащено). Подумайте об этом как о событии "mouseup". (Я попытался, но слайдер не остановился после того, как я нажал на слайдер.)

JavaScript:

$slider.bind('click', function(e) {
    e.preventDefault();
    console.log($this).val());
}

На боковой ноте это возвращает строку, поэтому убедитесь, что вы используете 'parseInt ($ (this).value())', когда это необходимо.

Надеюсь, что это поможет.

Ответ 7

Я использую несколько слайдеров HTML5 по умолчанию на одной странице со следующей настройкой:

• Тег вывода на странице изменяет значение при перемещении ползунка с помощью события oninput
• Событие change запускается один раз при выпуске

Протестировано новейшим Chrome и хорошо компилируется на малине с помощью Node и Socket.io.

<output id="APIDConKpVal"></output>&nbsp; <input type="range"
             class="PIDControlSlider"
             min="0"
             max="1500"
             step="1"
             id="APIDConKp"
             oninput="APIDConKpVal.value=value"/>

<output id="APIDConKiVal"></output>&nbsp; <input type="range"
             class="PIDControlSlider"
             min="0"
             max="2000"
             step="1"
             id="APIDConKi"
             oninput="APIDConKiVal.value=value"/>

Простой Javascript-код создает слушателей. Возможно, вам придется попробовать разные события вместо "изменить" в последней строке, чтобы увидеть, что вам подходит.

window.onload=function()
{
 var classname = document.getElementsByClassName("PIDControlSlider");

    var myFunction = function() {
        var attribute = this.getAttribute("id");
//Your code goes here
        socket.emit('SCMD', this.getAttribute("id")+' '+ this.value);
    };

    for(var i=0;i<classname.length;i++){
        classname[i].addEventListener('change', myFunction, false);
    }
}

Ответ 8

gravediggin, но если вам это нужно, проверьте функции js throttle или debounce

Использование:

//resize events gets processed 500ms after the last Event
addEventListener("resize", _debounce(function(){ foo;}, 500));

//resize events get processed every 500ms
addEventListener("resize", _throttle(function(){ foo;}, 500));

код:

/*waits 'delay' time after the last event to fire */
_debounce = function(fn, delay) {
    var timer = null;
    return function() {
        var context = this,
            args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    };
};


/* triggers every 'treshhold' ms, */
_throttle = function(fn, threshhold, scope) {
    threshhold = threshhold || 250;
    var last,
        deferTimer;
    return function() {
        var context = scope || this;

        var now = +new Date(),
            args = arguments;
        if (last && now < last + threshhold) {
            // hold on to it
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function() {
                last = now;
                fn.apply(context, args);
            }, threshhold);
        } else {
            last = now;
            fn.apply(context, args);
        }
    };
};

Ответ 9

другое предлагает:

$(".slider").change(function(){    
  if (this.sliderTimeour) clearTimeout(this.sliderTimeour);
  this.sliderTimeour = setTimeout(function(){
    //your code here
  },delayTimeHere);
});

Ответ 10

Вы можете попробовать использовать событие blur. Конечно, у него также есть ограничения, но это просто другое предложение:)

Вы также можете попытаться объединить события blur, onkeyup и onmouseup, чтобы попытаться поймать разные ситуации: blur, когда пользователь делает выбор с помощью стрелок и обращений клавиш <Tab>, onkeyup когда пользователь делает выбор с клавиатуры и остается сфокусированным на слайдере, и onmouseup, когда он использует мышь. Возможно, было бы возможно объединить только теги onkeyup и onmouseup.

Тем не менее вам нужно будет сделать простую проверку, изменилось ли значение или нет, и запустить необходимый код только после того, как произошло изменение.

Ответ 11

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

var interval;
$("#rangeinput").mousedown(function(event){
    interval = setInterval(function(){
        $("#output").html($("#rangeinput").val());
        console.log("running");
    },150);
});

$("#rangeinput").mouseup(function(event){
    clearInterval(interval);
});

http://jsbin.com/vibuc/1/