jQuery slider is not draggable

Question

I am using jQuery slider in my ruby on rails app. The problem is I am unable to drag slider button, but it moves successfully if I click at any place inside slider.

view file

<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 file

#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

Have you tried looking at the console in firebug to see if the javascript is working fine?

It does sound like a z-index problem but it looks like you have tried to address that already. Maybe also try using the firebug 'inspect element' tool to make sure nothing is at a z-index above the slider.

If possible send a link to an example and I will have a look