自定义jQuery表单滑块

我有一个网页，其中包含一些如下所示的输入滑块：http://jqueryui.com/demos/slider/#steps。自定义jQuery表单滑块

我需要的是强制用户在按下提交按钮之前移动滑块。

所以我想把把手的默认颜色设置为红色，如果他在红色时按下提交，会出现一个警告窗口，警告他需要点击或移动把手。当然，当他这样做时，颜色会改变，他会继续下去。

什么我到目前为止是：

<html> 
    <head> 
     <meta charset="utf-8"> 
     <link type="text/css" href="jQuery/css/start/jquery-ui-1.8.21.custom.css" rel="stylesheet" /> 
     <script type="text/javascript" src="jQuery/js/jquery-1.7.2.min.js"></script> 
     <script type="text/javascript" src="jQuery/js/jquery-ui-1.8.21.custom.min.js"></script> 
      <style> 
       #demo-frame > div.demo { padding: 10px !important; }; 
      </style> 
     <script> 
      $(document).ready(function() { 
       $(".slider").slider({ 
        step: 0.01, 
        min: 0, 
        max: 1, 
        value: 0.5, 
        slide: function(event, ui) { 
         $("input[name=" + $(this).attr("id") + "_question]").val(ui.value); 
         } 
       }); 
      }); 

     </script> 

     <form action="next.php" method="POST"> 
       <input type="hidden" value=0.5 name="first_question"/> 
      <div class="demo"> 
       <p> 
        <label>question 1:</label> 
       </p> 
       <div class="slider" id="first"></div> 
       <br /> 
       <br /> 
       <input type="hidden" value=0.5 name="second_question"/> 
       <p> 
        <label>question 2:</label> 
       </p> 
       <div class="slider" id="second"></div> 
      </div><!-- End demo --> 
       <br /> 
       <input type="submit" value="submit" id="bt"/> 
     </form> 
    </body> 
</html>

这是太复杂的实施？欢迎任何帮助。

来源

2012-06-26 Diogo Pereira