JQuery Slider不工作？

我想复制这里找到的滑块。

我有一个文件index.php ，代码如下：

头：

     .top { margin: 0px; padding: 0px; height: 500px; width: 500px; } .testing { margin-left: auto; margin-right: auto; margin-top: 200px; margin-bottom: 200px; padding: 0px; height: 100px; width: 100px; background: red; border: 1px solid #000; }   

身体：

  
 
 
 
a: 0 
 
  

JavaScript的：

  $("#a_slider").slider({ orientation: "horizontal", range: false, min: 0, max: 1, value: 0, step: .01, animate: true, slide: function (event, ui) { $("#a_field").val(ui.value); $("#a").text(ui.value); } });  

但它不起作用！ 我只能猜测头部的jqueryui链接是不正确的，但我很确定它与上面的小提琴相同。

如果您在解决方案中提供了一个小提琴，请使用外部资源，以便找到相应的文件。 简单的类和ID名称纯粹用于测试目的。

整个HTML：

      .top { margin: 0px; padding: 0px; height: 500px; width: 500px; } .testing { margin-left: auto; margin-right: auto; margin-top: 200px; margin-bottom: 200px; padding: 0px; height: 100px; width: 100px; background: red; border: 1px solid #000; }    
 
 
 
a: 0 
 
   $("#a_slider").slider({ orientation: "horizontal", range: false, min: 0, max: 1, value: 0, step: .01, animate: true, slide: function (event, ui) { $("#a_field").val(ui.value); $("#a").text(ui.value); } });   

谢谢。

编辑

我尝试过使用http://code.jquery.com/ui/1.10.4/jquery-ui.min.js ，但也没有骰子。 以下是显示内容的屏幕截图…

请注意图像中没有滑块出现。

Answer 1

这是工作小提琴

尝试正确加载jQuery UI：

     $("#a_slider").slider({ orientation: "horizontal", range: false, min: 0, max: 1, value: 0, step: .01, animate: true, slide: function (event, ui) { $("#a_field").val(ui.value); $("#a").text(ui.value); } }); 

Answer 2

您还必须包含jQuery UI样式表：

然后它会工作。

Answer 3

只需在jQuery ui之后添加jQuery UI touch：