Почему пользовательский слайдер jQuery не работает?

Я забыл что-то добавить или почему бы не увидеть слайдер?Почему пользовательский слайдер jQuery не работает?

Html

<div class="demo"> 
    <p> 
     <label for="amount"> 
      Maximum price:</label> 
     <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" value="@ViewData.Model" /> 
    </p> 
    <div id="slider-range-min"> 
    </div> 
</div> 
<!-- End demo --> 
<div class="demo-description"> 
    <p> 
     Fix the minimum value of the range slider so that the user can only select a maximum. 
     Set the <code>range</code> option to "min."</p> 
</div> 
<!-- End demo-description -->

Стили

#demo-frame > div.demo { 
    padding: 10px !important; 
};

сценария

$(function() { 
    $("#slider-range-min").slider({ 
     range: "min", 
     value: 37, 
     min: 1, 
     max: 700, 
     slide: function (event, ui) { 
      $("#amount").val("$" + ui.value); 
     } 
    }); 
    $("#amount").val("$" + $("#slider-range-min").slider("value")); 
});

Полный HTML Источник

<!DOCTYPE html> 
<html> 
<head> 
    <link href="/Content/Stylesheet/Site.css" rel="stylesheet" type="text/css" /> 

    <link rel="stylesheet" href="/Content/themes/base/jquery.ui.all.css" type="text/css" media="all" /> 
    <link rel="stylesheet" href="/Content/themes/base/jquery.ui.theme.css" type="text/css" media="all" /> 


    <script src="/Content/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery.validate.min.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery.bgiframe-2.1.2.js" type="text/javascript"></script> 
    <script src="/Content/Scripts/jquery-ui-i18n.min.js" type="text/javascript"></script> 

    <link href="favicon.ico" rel="icon" /> 

</head> 
<body> 

     <div class="editor-field"> 
      <div class="demo"> 
    <p> 
     <label for="amount"> 
      Maximum price:</label> 
     <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" value="50" /> 
    </p> 
    <div id="slider-range-min"> 
    </div> 
</div> 
<!-- End demo --> 
<div class="demo-description"> 
    <p> 
     Fix the minimum value of the range slider so that the user can only select a maximum. 
     Set the <code>range</code> option to "min."</p> 
</div> 
<!-- End demo-description --> 



<style type="text/css"> 
    #demo-frame > div.demo { padding: 10px !important; }; 
    </style> 
<script type="text/javascript"> 
    $(function() { 
     $("#slider-range-min").slider({ 
      range: "min", 
      value: 37, 
      min: 1, 
      max: 700, 
      slide: function (event, ui) { 
       $("#amount").val("$" + ui.value); 
      } 
     }); 
     $("#amount").val("$" + $("#slider-range-min").slider("value")); 
    }); 
</script> 

      <span class="field-validation-valid" data-valmsg-for="Discount" data-valmsg-replace="true"></span> 
     </div> 
</body> 
</html>

источник

2012-06-23 Mediator

Возможно, вам не хватает некоторых CSS. Вы уверены, что загрузили все CSS и используете локальное содержимое? – AvkashChauhan

- ошибки, брошенные в консоли браузера? Похоже, вы используете демо-версию для скачивания, лучше всего догадаться о проблеме пути к js или css. Посмотрите в консоли 'Net' или' Network' вкладку, чтобы проверить статус для всех загружаемых ресурсов. – charlietfl

Да, AvkashChauhan прав, вы что-то упустили в своем включении, вот ваш код на jsbin [link] (http: // jsbin. com/ixenew), и он отлично работает. – Ravi

Проверьте путь и удалить точку с запятой в конце кода CSS

#demo-frame > div.demo { 
padding: 10px !important; 
} 
//instead of 

#demo-frame > div.demo { 
padding: 10px !important; 
};

Я думаю, что это будет работать.

источник

2012-06-23 17:24:20 Medona

Это не имеет значения, поскольку проблема заключается в том, что 'div' не имеет высоты и, как таковой, остается невидимым и не может быть нажат. (В Chrome с помощью jsFiddle в любом случае) - См. Здесь: http://jsfiddle.net/yeScN/1/ – Nope

Вы правы ... Но нет необходимости явно определять заполнение и цвет, если вы включили два достаточных файла. – Medona

1.themes/basejquery.ui.all.css 2.jquery-ui-1.8.21-min.js Я удивляюсь новейшей версии jquery ui 1.8.21 – Medona

Почему пользовательский слайдер jQuery не работает?

ответ

Смежные вопросы