Изменение положения ручки ползунка с помощью jquery

Question

Я пытаюсь использовать jQuery / Javascript, чтобы изменить элемент ползунка так, чтобы ручка ползунка начиналась с 0%, а не с середины. Вот пример элемента, который я пытаюсь изменить:

https://www.guidedtrack.com/programs/z3srufd/run

Я заметил, что могу вручную изменить начальное положение ручки ползунка с помощью изменив следующее HTML

<div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-valuetext="Slide to answer" tabindex="0" style="left: 50%;"></div>

Я могу изменить style="left:50%;" на style = "left:0%;", но не могу понять, как это сделать программно (например, в Chrome / Firefox инспектор).

Например, выполнение

$(".slider-handle min-slider-handle round")

не возвращает совпадений

Я могу сделать:

$('[class^="slider-handle min-slider-handle round"]').css('style', 'left: 0%');

, что, кажется, работает, но фактический элемент не изменяется вообще.

Какой правильный код для изменения DOM, так что все ползунки на странице начинаются с 0% (например, самый левый надрез?)

Answer 1

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

Попробуйте использовать:

$(".slider-handle.min-slider-handle.round").css("left", "100%")

Примечание:

• style не является свойством CSS, поэтому вы не можете использовать .css("style", "left: 100%;"). В качестве альтернативы вышеприведенному решению вы можете установить весь стиль, используя .attr():

Пример:

$(".slider-handle.min-slider-handle.round").attr("style", "left: 100%")