기본 기능이있는 슬라이더

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