具有默认功能的滑块

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]); 
    } 
});