Javascript jQuery滑块不可拖动

我在RubyonRails应用程序中使用jQuery滑块。问题是我无法拖动滑块按钮，但如果我在滑块内的任何位置单击，它会成功移动

查看文件

<div id="slider"></div>
<%= text_field_tag :search_radius, params[:search_radius], placeholder: "2 miles", class: "search_radius" %>

css文件

#slider {
 width:100px ;
 height:11px;
 background:url(slider/slider-bg.png);
 margin-left: 10px;
 position:relative;
 padding:0 10px;
}

/*Style for the slider button*/
.ui-slider-handle {
 width:24px !important;
 height:24px !important;
 position:absolute !important;
 top:-7px !important;
 margin-left:-12px !important;
 z-index:200 !important;
 background:url("slider/slider-button.png") !important;
 border: none !important;
 display: block !important;
}

/*Result div where the slider value is displayed*/
#search_radius {
 font-size:20px;
 height:$searchInputsHeight;
 font-family:Arial, Helvetica, sans-serif;
 color:green;
 width:80px;
 text-align:center;
 text-shadow:0 1px 1px #000;
 font-weight:700;
 display:inline;
}

application.css

 *= require jquery.ui.slider

application.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.ui.slider

---

您是否尝试过查看firebug中的控制台，看看javascript是否工作正常

这听起来确实像是一个z索引问题，但看起来您已经尝试解决这个问题了。 也可以尝试使用firebug“inspect element”工具来确保滑块上方的z索引没有任何内容

---

如果可能的话，发送一个链接到一个例子，我会看一看，首先看起来一切都很好。请您尝试删除-更改并创建以下内容：

$(document).ready(function() {
 $("#slider").slider({
    step:1,
    range: "max",
    min: 1,
    max: 10,
    value: $('input.search_radius').val(), // needed to persist value after page reload
    slide: function(event, ui) {
      $(".search_radius").val(ui.value);
    }
  });
$(".search_radius").val($("#slider").slider("value"));

---

你好，阿列克斯！不幸的是，它没有做出任何改变。请您在上面创建一个示例，以便我可以更快地查看它。如果你试过用的话谢谢你Aleks。我已经创建了，一切正常。因此，问题似乎出现在z-index中，正如unegma猜测的那样，根据示例，现在似乎已经解决了：）感谢您为创建示例的简单建议提供+1:）如果在控制台中打印$（'input.search_radius'）.val（），您会得到什么？控制台给出“2”，我发现我的问题只存在于Safarit谢谢，unegma。我已经创建了z-index，看起来你是对的，我会检查它，我在手机预览版上测试过它，它没有拖拽。

$(document).ready(function() {
 $("#slider").slider({
    step:1,
    range: "max",
    min: 1,
    max: 10,
    value: $('input.search_radius').val(), // needed to persist value after page reload
    slide: function(event, ui) {
      $(".search_radius").val(ui.value);
    }
  });
$(".search_radius").val($("#slider").slider("value"));