jQuery滑块不可拖动

Question

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

查看文件

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

js file

$(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);
    },
  change: function() {
   $('input.search_radius').val( $( "#slider" ).slider( "value"));
    },
        create: function() {
    $('input.search_radius').val( $( "#slider" ).slider( ""));
  }
  });
$(".search_radius").val($("#slider").slider("value"));

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

Answer 1

您是否曾尝试在firebug中查看控制台以查看javascript是否正常运行？

听起来像z-index问题，但看起来你已经试图解决这个问题了。 也许还可以尝试使用firebug'vising element'工具来确保滑块上方的z-index没有任何内容。

如果可能的话，发送一个示例的链接，我将看看

Answer 2

嗯，起初看起来一切都很好看。您可以尝试删除 - 更改并创建如下：

$(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"));