Тип ввода = диапазон не обновляет свое значение

Question

У меня есть следующее:

 <input id="slider-min" type="range" min="0" max="55" value="0" 
 step="5" onchange="sliderMinUpdate(this.value)">,

<div id="min_input">0</div>

<input id="slider-day" type="range" min="0" max="10" value="0" 
 step="0.5" onchange="sliderDayUpdate(this.value)">

function sliderDayUpdate(value){
  $('#slider-min').val(0);
}

function sliderMinUpdate(value){
$('#min_input').text(value);    
}

Когда я фокусируюсь на slider-min с помощью клавиатуры и выбираю клавиатуру вправо или влево, она корректно обновляет значения в min_input. Когда я изменяю slider-day, он запускает onChange и обновляет значение с slider-min до 0, и я вижу, как оно работает на моей странице (ползунок возвращается к 0). Проблема возникает, когда я выбираю первый шаг slider-min, в данном случае 5. Когда вызывается onChange из slider-day, он корректно обновляет slider-min до 0, но когда я перехожу с 0 на 5 (slider-min) это не работает. Если я продолжу двигаться, это сработает.

Похоже, что состояние 5 поддерживалось в slider-min, поэтому, когда я устанавливаю $('#slider-min').val(0), ползунок обновляется, но когда я изменяю с 0 на 5, onchange="sliderMinUpdate(this.value)" не вызывается.

Понятия не имею, что происходит.

Answer 1

Меня немного смущает ваш вопрос, и этот ответ может быть неправильным, неуместным или слишком запоздалым, но я столкнулся с чем-то потенциально похожим с Chrome v23 (по состоянию на 24.12.12).Насколько я знаю, jQuery использует getAttribute () и setAttribute () для взаимодействия с обычными элементами, но эти функции, похоже, не работают для,Поскольку здесь нет необходимости в jQuery (кроме как для упрощения селекторов), я бы рекомендовал использовать обычный DOM document.getElementById ('rangeElement'). Value = x;получить / установить значение ползунка.

Answer 2

Вы должны:

1. изменить значение и

2. вызывает событие onchange.

Я делал это с jQuery + QUnit + FuncUnit для обработки ожиданий, но для следующего должен быть только jQuery.

$('input[type="range"]').val('0.5').trigger('change'); 

, где (min <= '0.5' => max)

Answer 3

У меня была похожая проблема, но я использовал не JQuery, а D3.js. Как Jimmetry уже заявил в своем ответе, jQuery, похоже, не может правильно вернуть значение <input type="range">. То же самое относится и к D3.js.

В моем случае эти строки кода не возвращали обновленных значений, но всегда их начальное значение.

var min = $("#slider-min").attr("value");              // using jQuery
var min = d3.select("#slider-min").attr("value");      // using D3

По старинке неожиданно всегда возвращались обновленные значения:

var min = document.getElementById('slider-min').value;