Question

I am trying to create a slider like this example. pls anyone help me. 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> 

Problem:

1. I want to remove the progress bar.
2. Fill the handle covered position with other color

Geetha.

Answer 1

I’m not sure what you mean by #2, but to remote the progress bar, shorten all that code down to this:

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

Just have your maxConstraint match your max to fill the bar after the cursor. Adjust the minConstraint option to be where you want, the value will be the initial position of the slider handler, in this example code, it matches.

If by #2 you mean that you want the portion after filled at all times, just update the minConstraint to match the current value (where the slider’s at), like this:

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