如何在ASP.NET MVC 3创建简单的范围滑块？ [英] How to create simple range slider in ASP.NET MVC 3?

问题描述

如何在ASP.NET MVC 3创建简单的滑动范围内无需使用外部库，如的Telerik 或任何其他？

How to create simple range slider in ASP.NET MVC 3 without using external libraries such as telerik or any other?

推荐答案

如果你的罚款与jQuery UI：

jQuery UI的滑块

样品code：

<meta charset="utf-8">
    <style>
    #demo-frame > div.demo { padding: 10px !important; };
    </style>
    <script>
    $(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>



<div class="demo">

<p>
    <label for="amount">Maximum price:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</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 -->

这篇关于如何在ASP.NET MVC 3创建简单的范围滑块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！