Question

我忘记添加内容或为什么看不到滑块？

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>

Answer 1

检查路径并删除css代码末尾的分号

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

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

我认为它会起作用。

为什么jQuery UI Slider无法正常工作？

1 个答案: