I am in need of assistance to create a slider similar to this example. Can anyone help me with this?
<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>
Issue:
- I would like to eliminate the progress bar.
- Change the color of the handle's covered position.
Geetha.