Curseur avec fonctionnalité par défaut

Question

J'essaie de créer un curseur comme celui-ci. Tout le monde m'aide. 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> 

Problème:

1. Je veux retirer la barre de progression.
2. Remplir la poignée avec la position couverte autre couleur

Gita.

Answer 1

Je ne suis pas sûr de ce que vous entendez par # 2, mais à distance de la barre de progression, raccourcir tout ce code à ceci:

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

Juste votre maxConstraint correspondent à votre max pour remplir la barre après le curseur. Réglez l'option minConstraint pour être là où vous voulez, le value sera la position initiale du gestionnaire de curseur, dans cet exemple de code, il correspond.

Si par # 2 vous voulez dire que vous voulez que la partie après rempli à tout moment, simplement mettre à jour le minConstraint pour correspondre à la valeur actuelle (où est le curseur à), comme ceci:

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