Обновление слайдера Material Design Lite - PullRequest
Новая
       10

Обновление слайдера Material Design Lite

2 голосов
/ 12 января 2020

Я пытался использовать MDL ползунки для создания моего сайта, но у меня возникла проблема. Все работает, однако, когда я пытаюсь изменить значение ползунка с помощью jQuery, «полоса» ползунка не синхронизируется, как вы можете видеть здесь:

enter image description here

или «синий круг» не окрашен (обратите внимание, что значением по умолчанию является минимальное значение, которое отключает цвет ползунка, и когда я обновляю его, он не не возвращайте цвет):

enter image description here

Код, который я использую для изменения значения ползунков: 

  $("#mySlider").val(10);

Но графическая часть не обновляется, только значение.

Это свойство, которое обрабатывает цвет полосы:

enter image description here

Минимальный воспроизводимый пример:

Чтобы воспроизвести это, вставьте ползунок 1038 * со значением по умолчанию, а затем измените его с помощью приведенного выше кода javascript для изменения значения.

Ответы [ 2 ]

2 голосов
/ 12 января 2020

Вы не должны менять value так, есть нативный способ: 

$('#click').on('click', function() {
  $('#mySlider').get(0).MaterialSlider.change(10);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<input class="mdl-slider mdl-js-slider" id="mySlider" type="range" min="0" max="100" value="25" tabindex="0">

<button id="click" class="mdl-button mdl-js-button mdl-button--raised">
  Update
</button>
1 голос
/ 12 января 2020

Хотя атрибут value используется для установки начального значения ползунка, его не следует использовать для программного изменения значения; вместо этого используйте метод MDL change (). Например, предполагая, что slider1 является объектом слайдера, а newvalue является переменной, содержащей желаемое значение, не используйте slider1.value = newvalue; вместо этого используйте slider1.MaterialSlider.change (новое значение)

...