Слайдер с функциональностью по умолчанию

Question

Я пытаюсь создать слайдер, как в этом примере. Пожалуйста, кто-нибудь, помогите мне. http://devsandbox.nfshost.com/js/jquery-ui/development-bundle/demos/slider/constraints.html

<link type="text/css" href="ui.all.css" rel="stylesheet" /> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript" src="jquery.ui.core.js"></script> 
<script type="text/javascript" src="jquery.ui.slider.js"></script> 
<link type="text/css" href="demos.css" rel="stylesheet" /> 
<link type="text/css" href="jquery-ui.css" rel="stylesheet" />
<style type="text/css"> 
    #demo-frame > div.demo { padding: 10px !important; };
</style> 
<script type="text/javascript"> 
var updateTime = function() {
    var time = $("#slider-constraints").slider("value");
    var minutes = Math.floor(time / 60);
    var seconds = time % 60;
    var secondsStr = (seconds < 10 ? "0" : "") + Math.round(seconds);
    $("#amount").val(minutes+":"+secondsStr);
}
$(function() {
    $("#slider-constraints").slider({
        max: 253,
        value: 10,
        minConstraint: 10,
        maxConstraint: 10,
        enforceConstraints: false,
        slide: updateTime 
    });
    updateTime();
    var maxConstraint = 10;
    window.setInterval(function() {
        maxConstraint += 1;
        $('#slider-constraints').slider("constraints", [10, maxConstraint]);
    }, 300);
    window.setInterval(function() {
        $('#slider-constraints').slider("value", $('#slider-constraints').slider("value")+1);
        updateTime();
    }, 1000);
});
</script> 

Проблема:

1. Я хочу удалить индикатор выполнения.
2. Заполните ручку в закрытом положении другим цветом

Гит.

Answer 1

Я не уверен, что вы подразумеваете под # 2, но чтобы удалить индикатор выполнения, сократите весь этот код до следующего:

$("#slider-constraints").slider({
    max: 253,
    value: 10,
    minConstraint: 10,
    maxConstraint: 253,
    enforceConstraints: false
});

Просто укажите, что maxConstraint соответствует вашему max, чтобы заполнить полосу после курсора. Настройте параметр minConstraint так, чтобы вам было нужно, value будет начальной позицией обработчика ползунка, в этом примере кода она соответствует.

Если под # 2 вы подразумеваете, что хотите, чтобы порция после заполнения была все время, просто обновите minConstraint, чтобы он соответствовал текущему значению (где находится ползунок), например:

$("#slider-constraints").slider({
    max: 253,
    value: 10,
    minConstraint: 10,
    maxConstraint: 253,
    enforceConstraints: false,
    slide: function(event, ui) {
      $("#slider-constraints").slider("constraints", [ui.value, 253]);
    }
});