如何在jQuery滑块中初始化默认值?

时间:2015-07-09 13:31:26

标签: jquery jquery-ui jquery-plugins slider

我正在使用jQRangeSlider创建一个显示日期的简单滑块。 我阅读了解释here仅第一部分,无需阅读整个页面...... ),现在想要创建一个简单的“#Hello”世界"使用默认值:

  • 滑块范围2014年1月至2014年6月
  • 标记默认放在4月1日和4月25日(4月是3月)。

这是我的代码:

<!DOCTYPE>
  <html>
  <head>
        <meta charset="utf-8"/>         
        <link rel="stylesheet" href="css/iThing.css" type="text/css" />
  </head>
  <body>
        <h1>Hello world</h1>
        <div id="slider"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="jquery-ui.js"></script>            
        <script src="jQDateRangeSlider-min.js"></script>



        <script>

            //create the slider
            $("#slider").dateRangeSlider();

            //set options - the the bounds of the slider
            $("#slider").dateRangeSlider(
                      "option",
                      "bounds",
                      {
                        min: new Date(2014, 1, 1),
                        max: new Date(2014, 5, 25)  
                    });

            //set options - the the boundsdefault values of the slider                                                              
            $("#slider").dateRangeSlider(
                      "option",
                      "defaultValues",
                      {
                        min: new Date(2014, 3, 1),
                        max: new Date(2014, 3, 25)  
                    });




        </script>
</body>
</html>

我确实看到了滑板并且它正在工作,但没有使用正确的值初始化。

看起来非常简单,但滑块无法正确初始化。我怎样才能解决这个问题?谢谢!

1 个答案:

答案 0 :(得分:1)

这可能对你有用。我只是马上初始化选项。

 $("#slider").dateRangeSlider(
            bounds:
                   {
                      min: new Date(2014, 1, 1),
                      max: new Date(2014, 5, 25)  
                   },
            defaultValues:
                   {
                      min: new Date(2014, 3, 1),
                      max: new Date(2014, 3, 25)
                   } 
    );