Панель слайдера jQuery с заполнением типа индикатора выполнения

Question

Я хочу реализовать пользовательский интерфейс jQuery таким образом, чтобы ползунок заполнял одну сторону панели цветом при перетаскивании маркера вперед, что-то вроде индикатора выполнения.Кто-нибудь может дать мне советы о том, как я мог бы подойти к этой проблеме?

Заранее благодарю вас.

Answer 1

Мне, вероятно, следовало бы взглянуть на slider() Документация более внимательно.Вот гораздо более простой способ сделать то, что, я думаю, вы ищете.Это уже встроено в пользовательский интерфейс jQuery.Приведенный ниже пример взят непосредственно из jQuery slider() страница документации, на которую я ссылался выше.Ключ - это range свойство, переданное в параметры.Придавая этому значение "min" приведет к тому, что ползунок заполнит левую сторону цветом.

JavaScript - файл:

$(function() {
    $("#slider-range-min").slider({
        range: "min",
        value: 37,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $("#amount").val('$' + ui.value);
        }
    });
    $("#amount").val('$' + $("#slider-range-min").slider("value"));
});

Разметка:

<div id="slider-range-min"></div>